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

约定不等于承诺〃 2023-07-14 08:28 10阅读 0赞

### 文章目录 ###

*   *  1、第一种方式
     *   *  1.1 安装nodejs
         *  1.2. 安装vue的脚手架工具
         *  1.3. 创建项目
         *  1.4. 运行项目
     *  2、第二种方式（推荐：简单实用）
     *   *  2.1 webpack-simple方式安装
         *  2.2 试试修改主页

## 1、第一种方式 ##

> 先上提纲：
> 
> 1.  必须要安装nodejs
> 2.  安装vue的脚手架工具
> 3.  创建项目
> 4.  运行项目

### 1.1 安装nodejs ###

[请看这篇文章][Link 1]

### 1.2. 安装vue的脚手架工具 ###

安装vue的脚手架工具 ：官方命令行工具，全局安装

npm install --global vue-cli  /   cnpm install --global vue-cli

此命令只需要执行一次，上面的两个命令我们一般用后者，这样使用国内的地址下载较快。

> 小技巧：cnpm 淘宝镜像  
> 这是淘宝的镜像，下载速度快，npm使用的是国外镜像  
> 地址：http://npm.taobao.org/  
> 安装cnpm： npm install -g cnpm --registry=https://registry.npm.taobao.org  
> 网站如下：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdXBlaWJpbjIwMTI_size_16_color_FFFFFF_t_70]

执行截图如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdXBlaWJpbjIwMTI_size_16_color_FFFFFF_t_70 1]  
如图所示，`vue-cli`安装成功，默认安装目录在：`C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli`

### 1.3. 创建项目 ###

> 先上提纲：
> 
> 1.  vue init webpack vue-demo01
> 2.  cd vue-demo01
> 3.  cnpm install / npm install 如果创建项目的时候没有报错，这一步可以省略。如果报错了 cd到项目里面运行 cnpm install / npm install
> 4.  运行项目：npm run dev

必须cd到对应的一个项目里面，我们是在D:\\work\\learn目录

cd D:\work\learn

然后执行如下命令创建vue-demo01项目：

vue init webpack vue-demo01

在执行的过程中，会询问一些问题，我们只需要在eslint步骤填写n，其他步骤都直接回车即可，如下图：。  
![在这里插入图片描述][20200314092014989.jpg]  
执行过程需要下载依赖，需要等待…，执行完毕的截图如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdXBlaWJpbjIwMTI_size_16_color_FFFFFF_t_70 2]  
如果安装过程报错的话可以执行如下操作：

cd  vue-demo01                //先到这个目录
    cnpm install                  //或者 npm install

我们这里没有报错，因此此步骤省略。

### 1.4. 运行项目 ###

先cd到vue-demo01目录下，然后执行npm run dev 运行程序，代码如下：

cd  vue-demo01 
    npm run dev

![在这里插入图片描述][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]

## 2、第二种方式（推荐：简单实用） ##

> 先上提纲：
> 
> 1.  vue init webpack-simple vue-demo02
> 2.  cd vue-demo02
> 3.  cnpm install / npm install
> 4.  运行项目：npm run dev

大家可以发现，和第一种的区别是：`webpack`和`webpack-simple`，其实从字面上看，也可以推断，这是一种简单的方式(**默认不创建eslint语法检查**)。

### 2.1 webpack-simple方式安装 ###

nodejs 仍然需要事先安装好！  
到D:\\work\\learn目录下执行：

vue init webpack-simple vue-demo02

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdXBlaWJpbjIwMTI_size_16_color_FFFFFF_t_70 5]  
根据提示，我们执行如下操作，首先进入目录： cd vue-demo02，执行安装命令：

cnpm install

cnpm install 执行成功：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdXBlaWJpbjIwMTI_size_16_color_FFFFFF_t_70 6]  
运行和测试和第一种方式一致：  
npm run dev  
访问：http://localhost:8080/ 出现如下界面。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdXBlaWJpbjIwMTI_size_16_color_FFFFFF_t_70 7]

### 2.2 试试修改主页 ###

> 小技巧：Visual Studio Code  
> 使用Visual Studio Code开发工具，非常好用

用开发工具打开工程，目录目录如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdXBlaWJpbjIwMTI_size_16_color_FFFFFF_t_70 8]  
上面接口，介绍了常用文件的作用，我们想修改主界面内容，只需要修改App.vue即可；  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdXBlaWJpbjIwMTI_size_16_color_FFFFFF_t_70 9]  
我们把msg数据的内容修改了，看看界面显示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdXBlaWJpbjIwMTI_size_16_color_FFFFFF_t_70 10]  
界面自动刷新了你修改的数据。这种开发和调试比起jquery开发简单的多了，快开启的vue开发吧。

[Link 1]: https://blog.csdn.net/houpeibin2012/article/details/104819134
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdXBlaWJpbjIwMTI_size_16_color_FFFFFF_t_70]: /images/20230529/3119149012ba47f3a0c1dd88de428bcc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdXBlaWJpbjIwMTI_size_16_color_FFFFFF_t_70 1]: /images/20230529/382d6d54d04144a08ad2e8ab06bcd87f.png
[20200314092014989.jpg]: /images/20230529/686a55ef58d9467f9b298f7895c575c7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdXBlaWJpbjIwMTI_size_16_color_FFFFFF_t_70 2]: /images/20230529/42ddac95bdc94b36ade584577dc65360.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdXBlaWJpbjIwMTI_size_16_color_FFFFFF_t_70 3]: /images/20230529/639eae32c9a94449b1964d446bb7373e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdXBlaWJpbjIwMTI_size_16_color_FFFFFF_t_70 4]: /images/20230529/435b2c19afbb4112926e31df46e9ddf0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdXBlaWJpbjIwMTI_size_16_color_FFFFFF_t_70 5]: /images/20230529/e6da0fcdef3a40c2b41a19d061a060a0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdXBlaWJpbjIwMTI_size_16_color_FFFFFF_t_70 6]: /images/20230529/57590b15f48a4764b6830b94132eeabb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdXBlaWJpbjIwMTI_size_16_color_FFFFFF_t_70 7]: /images/20230529/8640706ec0ee4a2cb788c82b2fd5b780.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdXBlaWJpbjIwMTI_size_16_color_FFFFFF_t_70 8]: /images/20230529/b9ecb36dc8d6441d98bec16ed1ba7c42.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdXBlaWJpbjIwMTI_size_16_color_FFFFFF_t_70 9]: /images/20230529/18f3f4875d884468ae9c53a9a6acdc10.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdXBlaWJpbjIwMTI_size_16_color_FFFFFF_t_70 10]: /images/20230529/9e4f615d4b7044338edc2ea430ef4811.png