IDEA使用vue-cli+webpack+npm脚手架创建项目

IDEA使用vue-cli脚手架创建项目

vue-cli的参考文档:https://cli.vuejs.org/zh/guide/cli-service.html
本文内容纯粹是操作过程,没有很多的知识讲解,需要了解详细知识的请到以上的文档去看,你需要先确保你的电脑安装了npm和webpack。

过程

IDEA使用vue-cli+webpack+npm脚手架创建项目_第1张图片
IDEA使用vue-cli+webpack+npm脚手架创建项目_第2张图片

在命令行输入以下指令
npm i -g vue-cli

IDEA使用vue-cli+webpack+npm脚手架创建项目_第3张图片

等待下载依赖(过程较长请耐心等候),依赖下载完成后就输入以下命令初始化项目(gshop为我的项目名称)
vue init webpack gshop

在这里插入图片描述

接下来会有一系列的东西需要确认,需要大家仔细看,以下图片仅供参考(ESLint建议选否,这玩意对于新手来说很是头疼)

IDEA使用vue-cli+webpack+npm脚手架创建项目_第4张图片

接着生成目录

IDEA使用vue-cli+webpack+npm脚手架创建项目_第5张图片
IDEA使用vue-cli+webpack+npm脚手架创建项目_第6张图片
IDEA使用vue-cli+webpack+npm脚手架创建项目_第7张图片
IDEA使用vue-cli+webpack+npm脚手架创建项目_第8张图片

这个时候目录已经生成好了,按下确认就可以了

IDEA使用vue-cli+webpack+npm脚手架创建项目_第9张图片

cd 资源文件的名称,进入后安装模块,最后在开发环境下运行项目
cd gshop
npm i 
npm run dev

在这里插入图片描述

输入http://localhost:8080即可进入项目
点击命令行,ctrl+c 结束项目(结束项目可以需要3-10秒的时间)

本文章为个人学习笔记,各位大佬有不同的意见可以提出,谢谢!

你可能感兴趣的:(学习笔记)