Cli是Command-Line Interface，翻译为命令行界面，俗称脚手架。Vue CLI是一个官方发布的vue.js项目脚手架，使用vue-cli可以快速搭建Vue开发环境以及对应的webpack配置。
vue-cli@3.x 版本和 vue-cli@2.x 版本有较大的区别，我们先以vue-cli@3.x版本搭建一个项目，后面再对两者进行比较。
首先需要保证安装Node环境。安装下载地址： https://nodejs.org/en/
通过vue-cli@3.x搭建vue项目
1. 安装 vue cli
在终端中输入以下命令进行全局安装：
1 | npm install -g @vue/cli |
nodejs中包含了npm，所以nodejs安装成功后，npm在全局可以直接使用。
2. 创建Vue项目
（1）在你要创建项目的目录下打开终端输入vue create 【你的项目名称】
（2）手动选择安装
注意：git bash 使用vue cli创建项目无法上下切换选项时：
用 winpty vue.cmd create . 命令替代vue create .命令就可以解决这个问题了。
（3）根据自己的需求选择
（4）选择vue版本
（5）是否使用calss风格的组件语法： (推荐：ｙ)
（6）这个选择的意思是要不要使用babel工具自动转换为ts代码注入polyiss（推荐： y）
（7）是否使用history模式创建路由；
（8）选择预处理器（如： less,sass,stylus）
（9）选择代码检测时的工具
（10）选择检测时机
（11）如何存放配置
（12）可以将当前创建项目配置作为一个模板方便下次直接使用
（13）至此，一个vue项目就创建完成了。
vue-cli@3+ 和 vue-cli@2.x的区别
1. 使用vue-cli@2.x 搭建vue项目
当我们使用npm install -g @vue/cli安装脚手架时，默认安装的是最新版本。并且Vue CLI >= 3 和旧版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具：
（来自官方文档）
1 | # 安装脚手架 |
2. vue-cli@2.x初始化项目详解
3. vue-cli@2.x项目目录结构
assets文件夹和static文件夹的区别：
assets里的文件编译过程中会被webpack处理理解为模块依赖，只支持相对路径的形式，因此assets多放可能会变动的文件。 static里的文件不会被webpack解析，会直接被复制到最终的打包(默认是dist/static)下，必须使用绝对路径引用这些文件，因此static多用于放一些不会变动的文件。
4. vue-cli@3+ 初始化项目详解
5. vue-cli@3+ 项目目录结构
vue-cli 3是基于webpack4打造的；vue-cli3的设计原则是“0配置”，移除了vue-cli2的配置目录build和config）；vue-cli 提供 vue ui 命令，提供了可视化配置，更加人性化；移除了static文件夹，新增public文件夹，并且index.html移动到public中。
6. vue-cli@3+ 中进行可视化配置
那么，vue-cli@2.x 中 build和config这两个配置webpack的文件夹，在vue-cli@3+ 中跑哪里去了呢？
在终端输入：
1 | vue ui |
导入创建好的项目：
进入vue ui（图形化管理界面），管理该项目：
vue ui中可以查看项目的插件和依赖：
通过vue ui添加插件和依赖：
修改脚手架的一些配置：
通过 vue ui 运行项目：
一大堆配置文件去哪里了？
