（2）vue-cli3+ 搭建vue项目

电玩女神 2023-07-24 13:17 151阅读 0赞

### 文章目录 ###

*   *  前言
     *   *  一、准备工作
         *   *  1. 下载node.js
             *  2. 打开cmd窗口，查看是否安装成功
             *  3. 配置淘宝 NPM 镜像
             *   *  1)第一种方式：
                 *  2)第二种方式
         *  二、安装vue脚手架 vue-cli3+
         *  三、一切就绪，开始构建VUE项目
         *   *  1. 初始化vue项目
             *  2. 运行项目
             *  3. 浏览器访问http://localhost:8080，出现vue页面即创建成功

## 前言 ##

无论是使用vue-cli2还是vue-cli3来搭建vue项目，都需要安装node.js以及
       npm（node.js中带有npm）
       说明：npm（node package manager）nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）

### 一、准备工作 ###

#### 1. 下载node.js ####

[下载地址][Link 1]：https://nodejs.org/zh-cn/download/  
选择长期支持版本，默认安装

ps:本文安装的windows x64系统 版本 node-v12.14.1-x64.msi

#### 2. 打开cmd窗口，查看是否安装成功 ####

查看安装版本 node -v  
查看npm版本 npm -v （现在版本的nodejs已经集成npm所以无需安装）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NodWFpODYyNA_size_16_color_FFFFFF_t_70]

#### 3. 配置淘宝 NPM 镜像 ####

默认的镜像地址下载依赖速度很慢，建议换成淘宝的地址，操作如下（我用的第一种）：

##### 1)第一种方式： #####

打开cmd命令窗口，输入

npm config set registry https://registry.npm.taobao.org

验证是否成功：

npm config get registry

如果返回https://registry.npm.taobao.org，说明镜像配置成功。

##### 2)第二种方式 #####

通过安装cnpm设置

npm install -g cnpm --registry=https://registry.npm.taobao.org

**cnpm -v** 来测试是否成功安装，  
安装了cnpm，就可以用**cnpm install xxx**来下载依赖

### 二、安装vue脚手架 vue-cli3+ ###

参考官网地址 [https://cli.vuejs.org/zh/guide/installation.html][https_cli.vuejs.org_zh_guide_installation.html]

如果之前安装了vue-vli2，需要先卸载

npm uninstall vue-cli -g

安装命令：

npm install -g @vue/cli

通过vue -V 来查看是否安装成功（注意命令中的V是大写）

### 三、一切就绪，开始构建VUE项目 ###

#### 1. 初始化vue项目 ####

先打开命令行窗口，然后cd到要创建的目录下  
或者直接在对应目录下，按住shift+鼠标右键 选择在此处打开PowerShell窗口

例如创建vue02项目

vue create vue02

\#按提示选择如下图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NodWFpODYyNA_size_16_color_FFFFFF_t_70 1]  
解释：

Please pick a preset 选择特性 默认或手动选择 （我是手动选择了Babel，Router）
    　　　　　　是否使用history模式  n
    　　　　　　配置放哪里  选择package.json
    　　　　　　是否保存当前配置为模板

#### 2. 运行项目 ####

项目目录下，执行 npm run serve

npm run serve

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NodWFpODYyNA_size_16_color_FFFFFF_t_70 2]

#### 3. 浏览器访问http://localhost:8080，出现vue页面即创建成功 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NodWFpODYyNA_size_16_color_FFFFFF_t_70 3]

vue-cli2版本搭建在这，[https://blog.csdn.net/shuai8624/article/details/104068611][https_blog.csdn.net_shuai8624_article_details_104068611]

[Link 1]: https://nodejs.org/zh-cn/download/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NodWFpODYyNA_size_16_color_FFFFFF_t_70]: /images/20230528/f8753771a0ff4661a5c2fbd6473a3c1a.png
[https_cli.vuejs.org_zh_guide_installation.html]: https://cli.vuejs.org/zh/guide/installation.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NodWFpODYyNA_size_16_color_FFFFFF_t_70 1]: /images/20230528/8faa360bdca442d7b65e065cf79f7cff.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NodWFpODYyNA_size_16_color_FFFFFF_t_70 2]: /images/20230528/e99eac47adf74dd59799f0a3dc835e3a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NodWFpODYyNA_size_16_color_FFFFFF_t_70 3]: /images/20230528/ab5102a1d11942b4a26d0c818a8f47db.png
[https_blog.csdn.net_shuai8624_article_details_104068611]: https://blog.csdn.net/shuai8624/article/details/104068611