vue脚手架(vue-cli)快速搭建vue项目教程豪华版

首先说一下vue脚手架指的是vue-cli（vue-cli又有很多版本，今天讲的是vue-cli2.0+的版本，后面还会出vue-cli3.0+创建项目的版本），它是一个专门为单页面应用快速搭建繁杂的脚手架，它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板。那可能有同学又问了，不用脚手架可不可以创建vue项目，我的答案是肯定的，只不过站在巨人的肩膀上，我们会走的更快哦！

1、安装node.js

注意：在安装node.js前，先在cmd（命令提示符）运行"node -v"，查看是否已经有node.js版本，若有了，则先卸载或删除

1.1官网下载node.js (可以根据自己电脑的版本选择32或者64位的，快乐分享🔗：下载 | Node.js)

​

1.2安装node.js(和安装QQ一样容易，一直下一步即可)

1.3配置node.js环境变量

1.3.1.找到node安装时候的位置，复制该路径，如：C:\Program Files\nodejs

1.3.2.打开电脑属性->高级->环境变量->Path编辑（将刚才复制的node安装路径粘贴进来，放最左边或者最右边都可以，加；分割开，如：C:\Program Files\nodejs；）

 ​ 

1.3.3.检测环境变量配置好了没，重新打开doc命令窗口（在旧的命令窗口依然检测不到nodejs）

 输入命令：node -v 

成功检测出node版本号，表明nodejs环境变量配置好了~

​

2、安装vue-cli

2.1方式一：npm直接安装vue-cli，获取vue-cli镜像资源

执行命令：npm install -g vue-cli

2.2方式二：cnpm安装vue-cli

注意：如果没有安装cnpm，cnpm安装执行命令：npm install -g cnpm --registry=https://registry.npm.taobao.org

执行命令：cnpm install -g vue-cli

2. 3检查vue-cli2是否安装成功

执行命令：vue -V

OK大工告成，安装成功啦，接下来可以愉快地学习vue项目开发啦！！

3、创建vue项目

执行命令：vue init webpack 项目名称（如果执行命令的时候失败了或者出现异常，说明vue-cli安装有问题，重新安装vue-cli就可以解决了）

​

项目配置，按如下配置即可

​ ​​​​​​​​

​

​

 4.要点总结：

一、创建vue-cli过程中部分配置内容：

1.Install vue-router?(Y/N)是否安装vue-router,这是官方的路由，大多数情况下都是用，这里就输入“Y"后回车即可。

2.Use ESLint to lint your code?(Y/n)是否使用ESLint管理代码，ESLint是代码风格管理工具，是用来统一代码风格的，一般项目中都会使用。如果选择N没有安装，不用怕后面项目中也可以安装的。

二、npm参数设置说明:

-g参数：参数安装（global）,可以在命令行下直接使用

如：npm root -g：可以查看全局安装的文件夹位置

-S或--save 参数：安装包信息将加入到dependencies(生产阶段的依赖)

如：npm i -gS vue-cli

-D或--save--dev参数：安装包信息将加入到devDependencies（开发环境依赖）

如：npm i -gD vue-cli

i 是install的缩写（注意：前面没有“-”）

如：npm i -g vue-cli 和 npm install -g vue-cli效果是一样的

亲爱的小伙伴，要不断尝试哦！感谢给小招一个点赞收藏评论转发鼓励一下吧-.-

---

文章持续更新，可以VX搜一搜「 小招猿记 」遇到问题第一时间回复哦，欢迎Star。