文章目录

• ​​前言​​
• ​​一、安装@vue/cli脚手架​​
• ​​二、vue-cli2脚手架安装vue项目​​

• ​​1. 可视化安装​​
• ​​2. 命令行安装​​

• ​​二、vue-cli3脚手架安装vue项目​​

• ​​1. 可视化安装​​
• ​​2. 命令行安装​​

• ​​三. vue-cli 版本区别​​

• ​​1. 2,3版本区别​​
• ​​2. 2,3,4版本区别​​

前言

一、安装@vue/cli脚手架

1. 全局安装，默认安装时最新版本

npm install -g @vue/cli
# OR
yarn global add @vue/cli

1. 查看版本信息

vue -V  # 查看其版本
vue --version # 查看其版本

二、vue-cli2脚手架安装vue项目

1. 可视化安装

vue-cli脚手架 2版本 是没有可视化安装的，只有3以上版本才可以可视化安装。

2. 命令行安装

1. 创建项目命令

vue init webpack my-project

1. 创建过程详解
2. 安装成功目录详情

二、vue-cli3脚手架安装vue项目

1. 可视化安装

2. 在终端输入命令 ​​vue ui​​ ，然后如下：



3. 
   
5. 会自动打开浏览器，如下，因为是第一次打开，并没有创建过项目，所以​​项目模块​​这里为空，然后进入到中间的​​创建​​模块。



6. 
   
8. 可以选择项目安装的目录，这里我就在这个目录下创建项目 ​​04-vuecli3test​​



9. 
   
11. 点击 上图的最下面的按钮，然后如下填入信息：



12. 
    
14. 再选择最后一个，就可以创建项目了，



15. 
    
17. 创建项目的过程会长一点，会受到网络的影响。



18. 
    



19. 
    
21. 打开项目所在目录，如下所示，则 ​​vue-cli脚手架可视化创建项目​​ 成功。



22. 
    

2. 命令行安装

2. 创建项目命令

vue create my-project

4. 安装过程详情



5. 
   
7. 创建项目成功后，目录详情



8. 
   

1. 2,3版本区别

1. vue-cli 3 与 2 版本有很大区别
2. vue-cli 3 是基于 webpack 4 打造，vue-cli 2 还是 webapck 3
3. vue-cli 3 的设计原则是“0配置”，移除的配置文件根目录下的，build和config等目录
4. vue-cli 3 提供了 vue ui 命令，提供了可视化配置，更加人性化
5. 移除了static文件夹，新增了public文件夹，并且index.html移动到public中

2. 2,3,4版本区别

1. vue-cli 3、4目录比2简洁了很多，没了build和config等目录
2. vue-cli 3、4的github 仓库由原有独立的 github 仓库迁移到了 vue 项目下
3. vue-cli 3、4项目架构完全抛弃了 vue-cli 2 的原有架构，3、4 的设计更加抽象和简洁
4. vue-cli 3、4是基于 webpack 4 打造，vue-cli 2 还是 webapck 3
5. vue-cli 3、4设计原则是“0配置”
6. vue-cli 3、4提供了 vue ui 命令，提供了可视化配置，更加人性化