window环境下安装vue.js开发环境

秒速五厘米 2023-10-06 21:52 21阅读 0赞

## 一、npm: [Nodejs][]下的包管理器。 ##

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16]  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_18_color_FFFFFF_t_70_g_se_x_16]  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_17_color_FFFFFF_t_70_g_se_x_16]  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_17_color_FFFFFF_t_70_g_se_x_16 1]  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_17_color_FFFFFF_t_70_g_se_x_16 2]  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_17_color_FFFFFF_t_70_g_se_x_16 3]  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_17_color_FFFFFF_t_70_g_se_x_16 4]

打开CMD，检查是否正常  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 1]  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 2]  
再看看另外2个目录，npm的本地仓库跑在系统盘c盘的用户目录了(没见到npm-cache是因为没有用过，一使用缓存目录就生成了)，我们试图把这2个目录移动回到D:\\node-v16.14.0-x64  
![在这里插入图片描述][f2d22ddcffbe4e77bf5eaca7dd4dd677.png]

然后运行以下2条命令  
npm config set prefix “D:\\node-v16.14.0-x64\\node\_global”  
npm config set cache “D:\\node-v16.14.0-x64\\node\_cache”  
![在这里插入图片描述][26e0f250d6854dd789edad94940f71ba.png]  
检查是否设置成功：npm list -global  
![在这里插入图片描述][ead2ec963c2244c7ae383bb29404bd1d.png]  
引进淘宝镜像npm config set registry=http://registry.npm.taobao.org  
![在这里插入图片描述][e994de10613640a6a602837f000a7842.png]  
查看配置信息npm config list  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 3]  
更新npm  
npm install npm -g  
![在这里插入图片描述][e6516f9745224e0b82195635f7c806aa.png]  
注意，此时，默认的模块D:\\nodejs\\node\_modules 目录，将会改变为D:\\nodejs\\node\_global\\node\_modules 目录，  
如果直接运行npm install等命令会报错的。  
我们需要做1件事情：  
1、增加环境变量NODE\_PATH 内容是：D:\\node-v16.14.0-x64\\node\_global\\node\_modules  
![在这里插入图片描述][507c23c0376046e694700d504f179a2c.png]

## 二、NPM安装vue.js ##

命令：npm install vue -g  
这里的-g是指安装到global全局目录去  
或  
npm install -g @vue/cli

## 三、NPM安装vue-router ##

命令：npm install vue-router -g

## 四、安装vue脚手架 ##

命令：npm install vue-cli -g  
输入 vue出现以下问题  
![在这里插入图片描述][f445f2208ddd46819712078c33a37419.png]  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_15_color_FFFFFF_t_70_g_se_x_16]  
对path环境变量添加  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 4]  
重启cmd窗口  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_17_color_FFFFFF_t_70_g_se_x_16 5]  
注意，vue-cli工具是内置了模板包括 webpack 和 webpack-simple,前者是比较复杂专业的项目，  
他的配置并不全放在根目录下的 webpack.config.js 中。

## 五、创建一个vue工程，验证环境安装是否完成 ##

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 5]  
![在这里插入图片描述][c991fe3008c84ce79c177ad6069e500c.png]  
![在这里插入图片描述][8fa09a93563440c3b664e57a82b041b9.png]  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 6]  
再浏览器输入http://localhost:8080，如果出现以下界面说明环境配置已经成功  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_17_color_FFFFFF_t_70_g_se_x_16 6]

**over~**  
到此就可以进行vue的开发和学习了

[Nodejs]: https://nodejs.org/zh-cn/
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/a8fb429520a74d18844f125993097d76.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_18_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/e88ab03212ae4878b070162830e563e1.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_18,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_17_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/968e5248a50941dbb629b67a41fe3c66.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_17,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_17_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/d1003d30fbf3495ab238a07c4b006184.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_17,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_17_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/2fb9b20306b0446b9e0b42f075a33fb6.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_17,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_17_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/c752532bb4d44bcdbbda727d22cd364c.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_17,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_17_color_FFFFFF_t_70_g_se_x_16 4]: https://img-blog.csdnimg.cn/4b7cabf3ccee418e8845b4ee97b18f4d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_17,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/9986462feff74168a6863712ce6789a9.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/ca63089de4d64a61b2515317abe806ff.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_20,color_FFFFFF,t_70,g_se,x_16
[f2d22ddcffbe4e77bf5eaca7dd4dd677.png]: https://img-blog.csdnimg.cn/f2d22ddcffbe4e77bf5eaca7dd4dd677.png
[26e0f250d6854dd789edad94940f71ba.png]: https://img-blog.csdnimg.cn/26e0f250d6854dd789edad94940f71ba.png
[ead2ec963c2244c7ae383bb29404bd1d.png]: https://img-blog.csdnimg.cn/ead2ec963c2244c7ae383bb29404bd1d.png
[e994de10613640a6a602837f000a7842.png]: https://img-blog.csdnimg.cn/e994de10613640a6a602837f000a7842.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/0f686bde10974422aada0271992d7da4.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_20,color_FFFFFF,t_70,g_se,x_16
[e6516f9745224e0b82195635f7c806aa.png]: https://img-blog.csdnimg.cn/e6516f9745224e0b82195635f7c806aa.png
[507c23c0376046e694700d504f179a2c.png]: https://img-blog.csdnimg.cn/507c23c0376046e694700d504f179a2c.png
[f445f2208ddd46819712078c33a37419.png]: https://img-blog.csdnimg.cn/f445f2208ddd46819712078c33a37419.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_15_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/2b01113707c14e9e8e9821799cfe0329.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_15,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 4]: https://img-blog.csdnimg.cn/79dfd69015c54186b2661536a9be7ad1.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_17_color_FFFFFF_t_70_g_se_x_16 5]: https://img-blog.csdnimg.cn/cdf777d4f3534f018242354954d55b1f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_17,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 5]: https://img-blog.csdnimg.cn/729b1ddc73f742c8a19fc6734684eec6.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_20,color_FFFFFF,t_70,g_se,x_16
[c991fe3008c84ce79c177ad6069e500c.png]: https://img-blog.csdnimg.cn/c991fe3008c84ce79c177ad6069e500c.png
[8fa09a93563440c3b664e57a82b041b9.png]: https://img-blog.csdnimg.cn/8fa09a93563440c3b664e57a82b041b9.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 6]: https://img-blog.csdnimg.cn/ae0321acc5424368979287859712bac9.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_17_color_FFFFFF_t_70_g_se_x_16 6]: https://img-blog.csdnimg.cn/29f50bbba0e7413dba371c73c3a14291.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_17,color_FFFFFF,t_70,g_se,x_16