Vue2.x学习笔记：第2章搭建Vue2.x开发环境的高级方式：基于Vue CLI 3.x的创建

我就是我 2023-07-14 10:32 5阅读 0赞

### 文章目录 ###

*   *  1、版本区别
     *  2、旧版本的安装以及创建项目
     *  3、Vue CLI 3 版本的安装以及创建项目（推荐 ）
     *   *  3.1 安装 Vue Cli3脚手架工具：官方命令行工具
         *  3.2 创建项目
     *  4 Vue CLI 3 图形化界面创建项目
     *   *  4.1 打开界面
         *  4.2 创建项目

Vue CLI3 编译速度快，性能好，建议使用。

## 1、版本区别 ##

关于 Vue CLI3 和 和 Vue CLI2 以及 Vue2.x Vue3.x的区别

> 注意：Vue CLI 3 是 Vue CLI 2 的升级版本，并不是 Vue3.0 。 Vue3.0 目前还没有正式发布。Vue CLI 3 和老版本的 Vue ClI 创建的项目方式是不一样的， 创建项目的用法是一样的。Vue CLI 3在项目编译速度上面做了一些优化。无论你用哪个版 本的 ClI，Vue3.0 发布之前写代码的方式都是一样的。目前 Vue3.0在去年开放了源码，并且今年将发出真正的可用于开发的版本

## 2、旧版本的安装以及创建项目 ##

[Vue2.x学习笔记：第一章 搭建开发环境的两种方式][Vue2.x_]

## 3、Vue CLI 3 版本的安装以及创建项目（推荐 ） ##

Node 版本要求：Vue CLI 3 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)

### 3.1 安装 Vue Cli3脚手架工具：官方命令行工具 ###

npm install -g @vue/cli
    或者：cnpm install -g @vue/cli
    或者：yarn global add @vue/cli

我们使用：cnpm install -g @vue/cli 进行安装。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdXBlaWJpbjIwMTI_size_16_color_FFFFFF_t_70]

### 3.2 创建项目 ###

首先cd D:\\work\\learn 目录，创建 vue-demo03 工程

vue create vue-demo03

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdXBlaWJpbjIwMTI_size_16_color_FFFFFF_t_70 1]  
我们cd vue-demo03 目录运行：npm run serve 看看是否可以运行成功。

> 小技巧：npm run serve 和 npm run dev的区别：
> 
> --------------------
> 
> Vue Cli3 采用 npm run serve
> 
> Vue Cli2 采用 npm run dev
> 
> 可以通过修改package.json 即可：  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdXBlaWJpbjIwMTI_size_16_color_FFFFFF_t_70 2]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdXBlaWJpbjIwMTI_size_16_color_FFFFFF_t_70 3]  
访问：http://localhost:8080/  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdXBlaWJpbjIwMTI_size_16_color_FFFFFF_t_70 4]  
成功了。

## 4 Vue CLI 3 图形化界面创建项目 ##

### 4.1 打开界面 ###

运行vue ui 命令，按照提示打开网址：http://localhost:8000，出现如下界面：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdXBlaWJpbjIwMTI_size_16_color_FFFFFF_t_70 5]

### 4.2 创建项目 ###

点击创建：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdXBlaWJpbjIwMTI_size_16_color_FFFFFF_t_70 6]  
出现如下界面：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdXBlaWJpbjIwMTI_size_16_color_FFFFFF_t_70 7]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdXBlaWJpbjIwMTI_size_16_color_FFFFFF_t_70 8]  
选择手动，下一步  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdXBlaWJpbjIwMTI_size_16_color_FFFFFF_t_70 9]  
下一步  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdXBlaWJpbjIwMTI_size_16_color_FFFFFF_t_70 10]  
创建项目，完成创建。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdXBlaWJpbjIwMTI_size_16_color_FFFFFF_t_70 11]  
保存预设模板，方便后续创建是直接选择使用。

这个创建非常慢，默认使用的是npm国外镜像，不建议使用。

[Vue2.x_]: https://blog.csdn.net/houpeibin2012/article/details/104854541
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdXBlaWJpbjIwMTI_size_16_color_FFFFFF_t_70]: /images/20230529/336268f945244b3bbc51559784241270.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdXBlaWJpbjIwMTI_size_16_color_FFFFFF_t_70 1]: /images/20230529/1b24d523417c4e448b9fbe53b9a5b09d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdXBlaWJpbjIwMTI_size_16_color_FFFFFF_t_70 2]: /images/20230529/da4bc3ee84cb47068e7f49ad234abd01.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdXBlaWJpbjIwMTI_size_16_color_FFFFFF_t_70 3]: /images/20230529/1f2bd22bfd084cb9a1e9feab5b3d6fb1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdXBlaWJpbjIwMTI_size_16_color_FFFFFF_t_70 4]: /images/20230529/92f51b43e85c4d36a4ef69dbd45c5937.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdXBlaWJpbjIwMTI_size_16_color_FFFFFF_t_70 5]: /images/20230529/36f3ec7b0b9040109b6919d007fb3245.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdXBlaWJpbjIwMTI_size_16_color_FFFFFF_t_70 6]: /images/20230529/8effb61246e947bbb034761d9b2720c6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdXBlaWJpbjIwMTI_size_16_color_FFFFFF_t_70 7]: /images/20230529/24dc547a60444e48870ad7c3febe88cc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdXBlaWJpbjIwMTI_size_16_color_FFFFFF_t_70 8]: /images/20230529/8e765fdb500441febb428a8049d22951.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdXBlaWJpbjIwMTI_size_16_color_FFFFFF_t_70 9]: /images/20230529/8ba6d55e6d0044d3b4f84d9976b83c78.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdXBlaWJpbjIwMTI_size_16_color_FFFFFF_t_70 10]: /images/20230529/440d248ada074f879d75c351095049d3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdXBlaWJpbjIwMTI_size_16_color_FFFFFF_t_70 11]: /images/20230529/0cd7d59f2d3c44a6a40893eee9af4f56.png