Vue-cli脚手架的详细配置流程（vue2.0版本）

• 页内目录
  一，Vue-cli脚手架
  二，配置脚手架
  三，基于doc
  四，基于可视化

一，Vue-cli脚手架

实际前端开发中都会使用VUE-CLI构建前端项目，从而实现前后端分离

二，配置

npm在内嵌在node中，需要先下载node.js

安装node.js

1. 进入安装界面；传送门
   
2. 安装到指定文件夹

使用npm下载所需要的前端包

• npm：是一个前端库，存放前端开发所需要的前端包，在国外服务器上存放，访问与下载慢，（理解成类似于maven库）
• cnpm：阿里镜像库

node.js安装后npm自动安装到电脑上了

1. 以管理员身份运行cmd（黑框）
2. 测试版本
   
3. 证明我们有npm了，但是cnpm没有，我们通常使用cnpm，所以我们需要安装cnpm
4. 安装cnpm；黑框继续输入：npm install -g cnpm（-g代表全局安装）
   
5. 出现下图即安装完成
   
6. 安装Vue CLI； 输入：npm install -g @vue/cli或者cnpm install -g @vue/cli
   

测试Vue CLI是否安装成功

1. 判断安装完成，通过命令:vue -V或vue --version查看vue-cli的版本，有则成功
   
   

三，基于doc

1. 在自己想要存放该项目的文件夹内打开黑框
   
2. 输入cmd 回车，
   
3. 然后输入vue create vue-project回车，得到
   
4. 选择
5. 是否悬念则history路由模式，我们选择hash模式；输入：n
   
6. 设置代码检查方式和代码格式化配置
   
7. 设置代码检测特性，选择保存时检测
   
8. 选择存放位置
   
9. 是否保存预设
   
10. 项目创建中
    
11. 等待完成,完成后进入根路径，即下图该界面，
12. 地址栏输入cmd，会车
    
13. 在黑框输入npm run serve回车，得到
    
14. 在浏览器界面输入测试，得到该界面，则成功
    
15. 使用工具打开，我这里使用VSCode打开该文件夹，便可开始前端的学习

四，可视化

1. 黑框输入vue ui
2. 黑框运行
   
3. 弹出界面
   
   后面的操作根doc差不多，只不过就是doc可视化操作了，（很卡，不建议使用）