前端Node环境安装教程以及前端Vue项目运行

以你之姓@ 2024-04-25 08:53 106阅读 0赞

> 【文章序言】：很高兴能在这篇博客与你相遇，博客记录自己的成长，进步，欢迎沟通交流。  
>   
> 博客来源于项目以及编程中遇到的问题总结，偶尔会有读书分享，我会陆续更新Java前端、后台、数据库、项目案例等相关知识点总结，感谢你的阅读和关注，希望我的博客能帮助到更多的人，分享获取新知，大家一起进步!  
>   
> 吾等采石之人，应怀大教堂之心，愿我们奔赴在各自的热爱里…

#### 文章目录 ####

*  一、前端环境安装说明
 *  二、安装失败解决方案
 *  三、前端运行指导教程
 *  四、运行失败解决方案

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

## 一、前端环境安装说明 ##

![在这里插入图片描述][0e4d418ec4b544a5883c5f35091aaaff.png]

**版本说明**：目前如果大家本科阶段做项目建议使用14-16版本的node,高版本的运行可能会出现部分环境问题；

**`如果是我给你的项目务必第一次安装使用16版本的`**  
**`如果是我给你的项目务必第一次安装使用16版本的`**  
**`如果是我给你的项目务必第一次安装使用16版本的`**

**所有项目均本地node-16版本调试**

![在这里插入图片描述][fad9e11b3e10427d9377b73365c08bd5.png]  
**环境安装获取链接**

链接：https://pan.baidu.com/s/1R8FfKZzq_uhtrpBfX0X3Bw?pwd=2024 
    提取码：2024

首先找到一个node的压缩包，然后点击安装；  
![在这里插入图片描述][5bc78800247c493d9af44b617819e0b5.png]  
一直点击下一步即可  
![!\[\](https://img-blog.csdnimg.cn/direct/f7865209ae7a41d588f7e30c4d1e2530.png][https_img-blog.csdnimg.cn_direct_f7865209ae7a41d588f7e30c4d1e2530.png]  
如上就一直点击下一步，选择指定文件夹即可；

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

**在安装目录新建这俩文件夹，存放缓存和全局文件**

*  点击右键 新建文件夹名称 **node\_cache**
 *  点击右键新建文件夹名称 **node\_global**

![在这里插入图片描述][932908a913464e309dd165d2a14bafa7.png]  
新建完成后，打开cmd，执行如下命令 **此处文件夹路径地址和本地保持一致**

npm config set cache  "D:\nodeJs\node_cache"

npm config set prefix "D:\nodeJs\node_global"

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

找到编辑环境变量配置  
![安装][a4e0d7fcdf254888b6bb8ff89a7d4086.png]

**新增一个系统环境变量：参考截图**

![在这里插入图片描述][00cf59423b48486aa99e9732c306d5d2.png]  
**在Path里面新增一行:**  
![在这里插入图片描述][2954e8cf385f4f3bb462e89a2f6661cc.png]

最后点击保存即配置完成；

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

**如何验证node是否安装成功？**

![在这里插入图片描述][c308c39612ad427987ed2022f19edafd.png]

如果你想要node执行下载的更快，可以配置一个镜像，命令如下

npm config set registry https://registry.npmmirror.com

![在这里插入图片描述][c320ad6268bd4e8cb42d0af7bcefd06f.png]  
**拓展学习**：在使用 Node.js 进行开发时，我们通常会使用 npm（Node Package Manager）来管理项目的依赖。npm 会从官方的软件源（Registry）下载依赖包并进行安装。

然而，由于网络环境的原因或者官方软件源的限制，有时候我们可能会遇到下载依赖包速度慢或者无法连接到官方软件源的情况。

为了解决这个问题，可以配置 Node 镜像，即将 npm 的源（registry）切换到国内的镜像源，这样就可以加快依赖包的下载速度，并且避免由于网络原因无法连接到官方软件源。

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

## 二、安装失败解决方案 ##

卸载重新安装

*  文件夹
 *  环境变量配置的地方

**或者你百度一下如何卸载node，找到对应文章操作即可**

**经验分享**：node就是一个环境，如果你安装坏了，卸载重新安装即可； **没有任何难度和技术壁垒** 也没有遇到过缓存的问题；放心大胆的卸载安装即可！

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

## 三、前端运行指导教程 ##

**首先一定要打开正确的目录结构**： 打开src上面只有一层文件夹即为正确

![在这里插入图片描述][3ba959f2cf6a40bf954cd6bdbccb3903.png]

**前端运行第一步** `执行npm install`：

npm install

输入这一行命令就是，代表下载依赖：部分框架代码在网上，从网上下载到本地；  
![在这里插入图片描述][769a204632b348d5895962c6cb91d0ac.png]

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

**前端运行第二步** `执行npm run serve`：

npm run serve

![在这里插入图片描述][e82d0fc9d5924d4993fa6722560e9f5d.png]

执行效果

![在这里插入图片描述][36677aea46e842bcabeae8f6102769ed.png]

**拓展**：部分项目运行第二步是执行 `npm run dev`，具体看项目配置和项目说明，都是运行命令，具体项目会有说明，根据项目灵活执行命令即可；

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

## 四、运行失败解决方案 ##

首先确定环境安装成功，如果安装失败，参考如上解决方案

![在这里插入图片描述][dd0d95913cb847f881810a0dde0fba5c.png]

如果安装成功；前端运行就两步

*  第一步 `npm install`
 *  第二步是 `npm run serve` 或者 `npm run dev`

`遇到问题只可能是第一步出现问题 即npm install下载失败`  
`遇到问题只可能是第一步出现问题 即npm install下载失败`  
`遇到问题只可能是第一步出现问题 即npm install下载失败`

**解决方案1**： 检查是否是网络原因，检查是否配置镜像【加速】，配置好镜像重新下载；

**解决方案2**：`npm install` 是在下载依赖到项目的`node_moudles`文件夹中，如果你本地下载失败，如果本地下载；那你就找对应的给你项目的人 直接拿到这个依赖，解压放到同级目录下;

![在这里插入图片描述][d215b7abd3c64253b79a68bd89cb6d27.png]

**`特别注意：很多人解压软件有问题 解压出来有多级目录【参考截图】`**

案例1：

![在这里插入图片描述][2e4015592b9a46bcbe477867cd357056.png]

案例2：

![在这里插入图片描述][084889977fde436c9840eb1b9d54dcbb.png]  
**如上放到同级的文件夹后，相当于你已经执行了 npm install过程（即下载依赖的过程）**

后续你只需要执行运行 `npm run serve` 或者 `npm run dev` 运行项目即可

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

?☕️?????  
?非常感谢你阅读到这里，如果这篇文章对你有帮助，希望能留下你的点赞? 关注❤️ 分享? 留言?thanks！！！

[0e4d418ec4b544a5883c5f35091aaaff.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/25/4a501ad473be419fa9282d537ca55c8c.png
[fad9e11b3e10427d9377b73365c08bd5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/25/f170c46018234116bc115bfaa039edb7.png
[5bc78800247c493d9af44b617819e0b5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/25/279908f0e2f4473c9040f4f136e69df5.png
[https_img-blog.csdnimg.cn_direct_f7865209ae7a41d588f7e30c4d1e2530.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/25/9b7e0861b4db4a80bb4e08f335daa335.png
[932908a913464e309dd165d2a14bafa7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/25/f57c63f740744678849f9c4aec6f0d60.png
[a4e0d7fcdf254888b6bb8ff89a7d4086.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/25/9be9fef35d6d41a4a6df3f0ea2438104.png
[00cf59423b48486aa99e9732c306d5d2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/25/e20e3b6bef2446469defd18b6d90d592.png
[2954e8cf385f4f3bb462e89a2f6661cc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/25/9dc83541d49f4070904ed0a899763872.png
[c308c39612ad427987ed2022f19edafd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/25/5c4be6b652024cd290cc3d197d337909.png
[c320ad6268bd4e8cb42d0af7bcefd06f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/25/236007b5391248f5b2d3909be64a49e3.png
[3ba959f2cf6a40bf954cd6bdbccb3903.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/25/e613c224bac64ac2bef39b3aaf8b81f2.png
[769a204632b348d5895962c6cb91d0ac.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/25/f51988d88bef41babbf43ee500bc8ff1.png
[e82d0fc9d5924d4993fa6722560e9f5d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/25/a01ed6e112ec4639861057795012d397.png
[36677aea46e842bcabeae8f6102769ed.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/25/e46a44939aff46598d9752bcf4374213.png
[dd0d95913cb847f881810a0dde0fba5c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/25/c66b6dc2dfce4bfe92eb029200d9ec53.png
[d215b7abd3c64253b79a68bd89cb6d27.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/25/57d2aeaa810647fabad1ac9fd70a58e4.png
[2e4015592b9a46bcbe477867cd357056.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/25/59e15c49db2e4736be1ed5a24b1c6c21.png
[084889977fde436c9840eb1b9d54dcbb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/25/3a3c89fb4b73466ca76321005f756c76.png