vue-cli学习一：vue脚手架的 vue-cli2和vue-cli3版本 创建vue项目，vue的初始化详解

前言

一、安装@vue/cli脚手架

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

   npm install -g @vue/cli
   # OR
   yarn global add @vue/cli
   
           
   
             
           
           
           
   
             
   
             AI 代码解读
           
         
         

2. 查看版本信息

   vue -V  # 查看其版本
   vue --version # 查看其版本
   
           
   
             
           
           
           
   
             
   
             AI 代码解读
           
         
         

   

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

1. 可视化安装

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

2. 命令行安装

1. 创建项目命令

   vue init webpack my-project
   
           
   
             
           
           
           
   
             
   
             AI 代码解读
           
         
         

2. 创建过程详解

3. 安装成功目录详情
   

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

1. 可视化安装

1. 在终端输入命令 vue ui ，然后如下：
   
2. 会自动打开浏览器，如下，因为是第一次打开，并没有创建过项目，所以项目模块这里为空，然后进入到中间的创建模块。
   
3. 可以选择项目安装的目录，这里我就在这个目录下创建项目 04-vuecli3test
   
4. 点击 上图的最下面的按钮，然后如下填入信息：
   
5. 再选择最后一个，就可以创建项目了，
   
6. 创建项目的过程会长一点，会受到网络的影响。
   
   
7. 打开项目所在目录，如下所示，则 vue-cli脚手架可视化创建项目 成功。
   

2. 命令行安装

1. 创建项目命令

   vue create my-project
   
           
   
             
           
           
           
   
             
   
             AI 代码解读
           
         
         

2. 安装过程详情
   

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

三. vue-cli 版本区别

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 命令，提供了可视化配置，更加人性化