前言
一、安装@vue/cli脚手架
全局安装，默认安装时最新版本
npm install -g @vue/cli # OR yarn global add @vue/cli查看版本信息
vue -V # 查看其版本 vue --version # 查看其版本
二、vue-cli2脚手架安装vue项目
1. 可视化安装
vue-cli脚手架 2版本 是没有可视化安装的，只有3以上版本才可以可视化安装。
2. 命令行安装
创建项目命令
vue init webpack my-project创建过程详解
- 安装成功目录详情
二、vue-cli3脚手架安装vue项目
1. 可视化安装
- 在终端输入命令
vue ui，然后如下：
- 会自动打开浏览器，如下，因为是第一次打开，并没有创建过项目，所以
项目模块这里为空，然后进入到中间的创建模块。
- 可以选择项目安装的目录，这里我就在这个目录下创建项目
04-vuecli3test
- 点击 上图的最下面的按钮，然后如下填入信息：
- 再选择最后一个，就可以创建项目了，
- 创建项目的过程会长一点，会受到网络的影响。
- 打开项目所在目录，如下所示，则
vue-cli脚手架可视化创建项目成功。
2. 命令行安装
创建项目命令
vue create my-project安装过程详情
- 创建项目成功后，目录详情
三. vue-cli 版本区别
1. 2,3版本区别
- vue-cli 3 与 2 版本有很大区别
- vue-cli 3 是基于 webpack 4 打造，vue-cli 2 还是 webapck 3
- vue-cli 3 的设计原则是“0配置”，移除的配置文件根目录下的，build和config等目录
- vue-cli 3 提供了 vue ui 命令，提供了可视化配置，更加人性化
- 移除了static文件夹，新增了public文件夹，并且index.html移动到public中
2. 2,3,4版本区别
- vue-cli 3、4目录比2简洁了很多，没了build和config等目录
- vue-cli 3、4的github 仓库由原有独立的 github 仓库迁移到了 vue 项目下
- vue-cli 3、4项目架构完全抛弃了 vue-cli 2 的原有架构，3、4 的设计更加抽象和简洁
- vue-cli 3、4是基于 webpack 4 打造，vue-cli 2 还是 webapck 3
- vue-cli 3、4设计原则是“0配置”
- vue-cli 3、4提供了 vue ui 命令，提供了可视化配置，更加人性化
