【Vue】跑通vue项目所需要配置环境和跑通vue项目

淩亂°似流年 2023-02-17 06:28 25阅读 0赞

### 文章目录 ###

*   *   *  安装环境
         *   *  一、安装node.js
             *   *  1. 到官网进行下载node.js ，推荐下载.msi（一直点next即可）
                 *  2. 安装成功后，按win + r 输入cmd进入控制台
                 *  3. 输入 node -v 检查是否安装成功
             *  二、安装cnpm
             *   *  1. 安装node.js后，同时也安装了npm。
                 *  2. 配置cnpm
             *  三、安装webpack
             *   *  1. 通过npm来安装webpack、
                 *  2. 输入webpack -v 来查看是否安装成功
             *  四、安装vue-cli
             *   *  1. 通过cnpm来安装vue-cli
         *  跑通vue项目
         *   *  一、首先进入项目的根目录安装项目依赖
             *  二、然后开始跑vue项目
             *  三、停止 输入Ctrl + c 输入Y即可

### 安装环境 ###

#### 一、安装node.js ####

##### 1. 到官网进行下载node.js ，推荐下载.msi（一直点next即可） #####

地址：https://nodejs.org/en/download/

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09uZV9jYXN0bGU_size_16_color_FFFFFF_t_70][]

##### 2. 安装成功后，按win + r 输入cmd进入控制台 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09uZV9jYXN0bGU_size_16_color_FFFFFF_t_70 1]

##### 3. 输入 node -v 检查是否安装成功 #####

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09uZV9jYXN0bGU_size_16_color_FFFFFF_t_70 2][]  
**显示版本信息即安装成功**

#### 二、安装cnpm ####

##### 1. 安装node.js后，同时也安装了npm。 #####

输入npm -v查看版本号  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09uZV9jYXN0bGU_size_16_color_FFFFFF_t_70 3]

##### 2. 配置cnpm #####

但是因为npm有些资源被屏蔽或者是由于国外资源的原因，经常会导致用npm安装依赖包失败的情况。所以我们可以选择使用npm的国内镜像。

输入：

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09uZV9jYXN0bGU_size_16_color_FFFFFF_t_70 4][]

等待安装成功后输入cnpm -v查看版本  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09uZV9jYXN0bGU_size_16_color_FFFFFF_t_70 5]

#### 三、安装webpack ####

##### 1. 通过npm来安装webpack、 #####

输入

npm install webpack -g

##### 2. 输入webpack -v 来查看是否安装成功 #####

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09uZV9jYXN0bGU_size_16_color_FFFFFF_t_70 6][]

#### 四、安装vue-cli ####

##### 1. 通过cnpm来安装vue-cli #####

cnpm install vue-cli -g

**等待安装成功，没有报错一般就是安装成功**

### 跑通vue项目 ###

#### 一、首先进入项目的根目录安装项目依赖 ####

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09uZV9jYXN0bGU_size_16_color_FFFFFF_t_70 7][]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09uZV9jYXN0bGU_size_16_color_FFFFFF_t_70 8]  
然后输入**cnpm install**就会开始安装项目的依赖

**（安装中…）**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09uZV9jYXN0bGU_size_16_color_FFFFFF_t_70 9][]

等待安装成功即可。

**安装成功**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09uZV9jYXN0bGU_size_16_color_FFFFFF_t_70 10][]

安装成功后，你的代码目录下会出现一个node\_modules文件夹

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09uZV9jYXN0bGU_size_16_color_FFFFFF_t_70 11][]

#### 二、然后开始跑vue项目 ####

输入(我的代码是serve，有些是dev)

npm run serve

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09uZV9jYXN0bGU_size_16_color_FFFFFF_t_70 12]  
输入后回车就开始跑了

**成功之后会出现下面地址**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09uZV9jYXN0bGU_size_16_color_FFFFFF_t_70 13][]

复制http://localhost:8080/到浏览器打开即可。

#### 三、停止 输入Ctrl + c 输入Y即可 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09uZV9jYXN0bGU_size_16_color_FFFFFF_t_70 14]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09uZV9jYXN0bGU_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200513113931528.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09uZV9jYXN0bGU=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09uZV9jYXN0bGU_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200513114007493.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09uZV9jYXN0bGU=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09uZV9jYXN0bGU_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200513114022350.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09uZV9jYXN0bGU=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09uZV9jYXN0bGU_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200513114040967.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09uZV9jYXN0bGU=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09uZV9jYXN0bGU_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200513114203619.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09uZV9jYXN0bGU=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09uZV9jYXN0bGU_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200513114521559.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09uZV9jYXN0bGU=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09uZV9jYXN0bGU_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200513114109840.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09uZV9jYXN0bGU=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09uZV9jYXN0bGU_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20200513114257679.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09uZV9jYXN0bGU=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09uZV9jYXN0bGU_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20200513114327428.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09uZV9jYXN0bGU=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09uZV9jYXN0bGU_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20200513114342346.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09uZV9jYXN0bGU=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09uZV9jYXN0bGU_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20200513114353311.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09uZV9jYXN0bGU=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09uZV9jYXN0bGU_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/20200513114403887.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09uZV9jYXN0bGU=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09uZV9jYXN0bGU_size_16_color_FFFFFF_t_70 12]: https://img-blog.csdnimg.cn/20200513114418866.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09uZV9jYXN0bGU=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09uZV9jYXN0bGU_size_16_color_FFFFFF_t_70 13]: https://img-blog.csdnimg.cn/20200513114429261.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09uZV9jYXN0bGU=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09uZV9jYXN0bGU_size_16_color_FFFFFF_t_70 14]: https://img-blog.csdnimg.cn/20200513114441113.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09uZV9jYXN0bGU=,size_16,color_FFFFFF,t_70