构建Vue-cli步骤总结

你的名字 2023-01-10 14:40 43阅读 0赞

## 构建vue-cli步骤总结 ##

> 前天一个大二的学妹私信我，叫我帮忙找下node-v8.11.1-x64.msi的安装包。由于公司网比较慢，所以想从CSDN上直接下载，但是发现基本上都要50个积分，坑的一逼。因为整理出几个版本的node.js安装包、并且把之前记录的构建vue项目详细步骤分享一下。
> 
> node-v8.11.1-x64：
> 
>     链接：https://pan.baidu.com/s/1gQfCX3Gzn1o-UG14FiXnqw  
>     提取码：k9hr
> 
> node-v10.16.0-x64
> 
>     链接：https://pan.baidu.com/s/15nP6uQZBo4LdNMdC4YqheQ 
>     提取码：7oyp
> 
> node-v12.18.4-x64
> 
>     链接：https://pan.baidu.com/s/1EOtDfVr3G7O2ektEmbEUuA 
>     提取码：i4qe
> 
> node-v14.15.4-x64
> 
>     链接：https://pan.baidu.com/s/1jq6KxpiYgIZ7hkCka4D5ew 
>     提取码：vuoz

1、下载并且安装node.js,安装后系统默认配置好环境（此电脑-属性-高级系统设置-环境变量-系统变量-path)

2、查看node版本以及npm版本，安装node以后，系统自动帮我们安装好npm。

> node与npm版本一般都是有对应关系的，对应关系详情如下：
> 
> https://nodejs.org/zh-cn/download/releases/
> 
> **注意**：如果node与npm版本对应不上，则卸载node且需要彻底删除npm后，重新安装node

查看node版本  
`node -v`

查看npm版本  
`npm -v`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjA2OTAx_size_16_color_FFFFFF_t_70]  
3、为加速配置，注册到淘宝的环境

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

4、安装vue-cli（第一次安装时需要，已经安装过了无需再次安装）

npm install -g vue-cli

5、进入创建项目的目录

cd xxxx

xxxx指的是项目的路径  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjA2OTAx_size_16_color_FFFFFF_t_70 1]  
6、初始化项目

vue init webpack just-learning

just-learning是指项目名字  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjA2OTAx_size_16_color_FFFFFF_t_70 2]  
下载模板后，会看到如下页面  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjA2OTAx_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjA2OTAx_size_16_color_FFFFFF_t_70 4]

> **Install vue-router?**  
> \-是指是否需要路由，在开发vue的时候需要用页面路由，此处输入 y
> 
> **Use ESLint to lint your code?**  
> \-是否需要ESLint 校验代码，ESLint 是一个代码格式的检查。一般新手不建议使用，因为ESLint 是强的代码规范约束，如果代码不规范就会报错，可等熟悉vue编码后再使用。此处输入 n  
> **Set up unit tests**  
> \-是否建立单元测试，暂时不需要，此处输入 n  
> **Setup e2e tests with Nightwatch?**  
> \-不需要，次处输入 n  
> **Should we runnpm installfor you after the project has been created? (recommended)**  
> \-键入Enter

7、进入刚创建的项目目录

cd just-learning

8、下载依赖

npm install

9、启动项目

npm run dev

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjA2OTAx_size_16_color_FFFFFF_t_70 5]  
访问：http://localhost:8080/\#/，出现如下页面则表示成功  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjA2OTAx_size_16_color_FFFFFF_t_70 6]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjA2OTAx_size_16_color_FFFFFF_t_70]: /images/20221119/96a2c1ead00240fcbfea72ee116bf192.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjA2OTAx_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210124224957838.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjA2OTAx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjA2OTAx_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210124225051409.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjA2OTAx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjA2OTAx_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20210124225123857.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjA2OTAx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjA2OTAx_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20210124225219104.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjA2OTAx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjA2OTAx_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20210124225850894.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjA2OTAx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjA2OTAx_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/202101242300531.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjA2OTAx,size_16,color_FFFFFF,t_70