MacOs安装nodejs/npm——vsCode启动前端项目

﹏ヽ暗。殇╰゛Y 2024-04-01 13:15 86阅读 0赞

#### 目录 ####

*  一、下载node.js
 *   *  1.下载
     *  2、安装
     *  3. 检查是否安装成功
 *  二、前端项目通过npm下载包node\_modules
 *   *  1.检查一下npm
     *  2.在终端输入npm install
 *  三、安装成功后启动项目

## 一、下载node.js ##

### 1.下载 ###

[nodejs下载地址][nodejs]  
![在这里插入图片描述][4e1b6a6088164343be1b69c187377f88.png_pic_center]  
其实用homebrew也可以，但是实在没找到好用的镜像源。

### 2、安装 ###

![在这里插入图片描述][47e54dca1dff45b599cee8b334d17bb2.png_pic_center]  
跟着安装器一步步走  
![在这里插入图片描述][890bd09d12d748f48d62c0d33e374b89.png_pic_center]  
![在这里插入图片描述][04bbe8fe60f54036928f09ac578f384c.png_pic_center]

### 3. 检查是否安装成功 ###

打开终端输入node -v出现版本就说明安装成功了  
![在这里插入图片描述][7296ee01df6b4ad39158321a4e84a6e7.png_pic_center]

## 二、前端项目通过npm下载包node\_modules ##

### 1.检查一下npm ###

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

### 2.在终端输入npm install ###

中间你会遇到各种问题，如果遇到这些问题，请移步[npm常见报错及问题][npm]

## 三、安装成功后启动项目 ##

npm run serve

看到以下就说明项目正常运行了，然后打开对应网址就可以看见自己的项目了！

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

[nodejs]: https://nodejs.org/en/download/
[4e1b6a6088164343be1b69c187377f88.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/79ef368e55174e13971794225ed7ba6d.png
[47e54dca1dff45b599cee8b334d17bb2.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/ba2846d7d0884d26833cbba55e053d9a.png
[890bd09d12d748f48d62c0d33e374b89.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/c50df77933804763ab0d7cc1fb13a61c.png
[04bbe8fe60f54036928f09ac578f384c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/4a24e35d7b8e4a9a87dce6dd2dbd6622.png
[7296ee01df6b4ad39158321a4e84a6e7.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/7796b271bbb34a8a9e4d1123443f332d.png
[a804cb39bd36496ea352833c8e96a880.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/458e28ee742f483aa97901f40b405a82.png
[npm]: https://blog.csdn.net/weixin_44712778/article/details/127638510?spm=1001.2014.3001.5502
[9765b180421b4c5f8d783529a1abe057.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/525256f92e8e4680ac20c5d0e4da4ddb.png