（1）vue-cli2 搭建vue项目

短命女 2023-07-01 12:57 9阅读 0赞

### 文章目录 ###

*   *  前言
     *   *  一、准备工作
         *   *  1. 下载node.js
             *  2. 打开cmd窗口，查看是否安装成功
             *  3. 配置淘宝 NPM 镜像
             *   *  1)第一种方式：
                 *  2)第二种方式
         *  二、安装vue脚手架 vue-cli2
         *  三、一切就绪，开始构建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-cli2 ###

npm install -g vue-cli

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

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

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

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

例如创建vue01项目

vue init webpack vue01

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

Project name 项目名称
    　　　　　　Project description 项目名描述
    　　　　　　Author 作者
              Vue项目构建：运行+编译还是仅运行
              是否安装vue-router?
    　　　　　　Use ESLint to lint your code? 是否需要ESlist语法检查
    　　　　　　Setup unit tests? 是否需要单元测试
    　　　　　　Setup e2e tests with Nightwatch? 是否需要e2e测试
              是否在项目创建成功后自动执行“npm install”安装依赖

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

项目目录下，执行npm run dev

npm run dev

![在这里插入图片描述][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-cli3+版本在这 [https://blog.csdn.net/shuai8624/article/details/105461814][https_blog.csdn.net_shuai8624_article_details_105461814]

[Link 1]: https://nodejs.org/zh-cn/download/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NodWFpODYyNA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200122112029243.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NodWFpODYyNA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NodWFpODYyNA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200411225056241.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NodWFpODYyNA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NodWFpODYyNA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200411225456914.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NodWFpODYyNA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NodWFpODYyNA_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200411233855681.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NodWFpODYyNA==,size_16,color_FFFFFF,t_70
[https_blog.csdn.net_shuai8624_article_details_105461814]: https://blog.csdn.net/shuai8624/article/details/105461814