使用vue-cli搭建一个简单的webpack项目

灰太狼 2023-01-22 13:53 216阅读 0赞

## 使用vue-cli搭建一个简单的webpack项目 ##

vue-cli是官方提供的一个脚手架，用于快速开发生成一个vue项目模板。

**开始搭建**

### 首先搭建nodejs环境 ###

**1.安装node.js**  
[官网下载nodejs][nodejs]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW96aHV6aHV5YW5n_size_16_color_FFFFFF_t_70]**2.配置nodejs环境变量**  
![在这里插入图片描述][20210520095745948.png]  
**3.检测环境变量**  
![在这里插入图片描述][20210520095859726.png]  
`补充：因为npm是到国外下载镜像，比较慢，所以我们可以使用cnpm`

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

## 搭建vue-cli环境 ##

**1.下载vue-cli**

cnpm install vue-cli -g

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW96aHV6aHV5YW5n_size_16_color_FFFFFF_t_70 1]  
**2.查看项目类型：**

vue list

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

**3.初始化vue-cli项目**

vue init webpack myvue02

`会出现选项和我选的一样即可！`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW96aHV6aHV5YW5n_size_16_color_FFFFFF_t_70 3]**创建完之后就会出现和我一样的文件**  
![在这里插入图片描述][20210520100854192.png]  
**4.加载项目：** 进入项目myvue02中

npm install

![在这里插入图片描述][20210520101047288.png]`可能会报错,不要方，vue会有提示，输入npm audit fix命令 即可修复！`

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW96aHV6aHV5YW5n_size_16_color_FFFFFF_t_70 4]  
**5.运行项目**

npm run dev

`如下图，为成功！！`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW96aHV6aHV5YW5n_size_16_color_FFFFFF_t_70 5]  
**6.打开浏览器访问：http://localhost:8080/**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW96aHV6aHV5YW5n_size_16_color_FFFFFF_t_70 6]

#### 大功告成！！ ####

--------------------

**补充：**  
`如果做开发，我们可以使用idea打开项目，但需要下载一个插件`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW96aHV6aHV5YW5n_size_16_color_FFFFFF_t_70 7]

[nodejs]: https://nodejs.org/en/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW96aHV6aHV5YW5n_size_16_color_FFFFFF_t_70]: /images/20221020/27cb4e993f2f4d96a3d274a5262e9cee.png
[20210520095745948.png]: /images/20221020/951f6600ac414e4096e1dedfc5e8d17a.png
[20210520095859726.png]: /images/20221020/ed51bbc6ae474938b9e5489b5a32dd90.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW96aHV6aHV5YW5n_size_16_color_FFFFFF_t_70 1]: /images/20221020/4e9ab409d0bc4307b7e00055801ebf3b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW96aHV6aHV5YW5n_size_16_color_FFFFFF_t_70 2]: /images/20221020/f77ce2150d7147b7a1150d5d2f8cab08.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW96aHV6aHV5YW5n_size_16_color_FFFFFF_t_70 3]: /images/20221020/7c5cc2903f6b4e359adb8a2cb186f63d.png
[20210520100854192.png]: /images/20221020/772c1de6be06479c9d7530a68dc0cbb1.png
[20210520101047288.png]: /images/20221020/d597a34c5e744ab1b7b68b52c0759291.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW96aHV6aHV5YW5n_size_16_color_FFFFFF_t_70 4]: /images/20221020/fb7e3b4db31a47bb994d9929a825490c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW96aHV6aHV5YW5n_size_16_color_FFFFFF_t_70 5]: /images/20221020/8ce0dca43c9b47df977ab539e6fe3cc2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW96aHV6aHV5YW5n_size_16_color_FFFFFF_t_70 6]: /images/20221020/ee5e492435ef4c9da8d6fc7283578947.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW96aHV6aHV5YW5n_size_16_color_FFFFFF_t_70 7]: /images/20221020/85af332363034513ba84497c12912a5e.png