mac pro前端开发环境搭建

---

前言

    本文背景主要在本人已经搭建好后端环境之后，在mac pro上再搭建前端开发环境。具体后端环境搭建教程参考mac pro java后端开发环境搭建

---

一、Visual Studio Code

   首先下载vscode到本地，然后解压即可使用。
   ps：如果想要在启动台上出现vscode图标，只需要将解压后的文件移动到应用程序里即可

参考图片

二、Node.js

下载Node.js

   进入Node.js官网选择相应的版本下载到本地，然后双击安装即可。mac pro下载后缀为pkg的安装包。

参考图片

卸载Node.js

   因为有时候前端项目不支持太高版本的Node.js，所以还需要掌握卸载的方法。卸载完后，选择项目需要的版本进行重新下载。

卸载步骤

   打开终端，输入命令which node，查看Node.js安装地址。

   然后输入以下命令，删除Node.js相关文件；如果有的文件没有，就不用删除。

sudo rm -rf /usr/local/bin/npm
sudo rm -rf /usr/local/share/man/man1/node.1
sudo rm -rf /usr/local/lib/dtrace/node.d
sudo rm -rf ~/.npm
sudo rm -rf ~/.node-gyp
sudo rm /usr/local/bin/node

   在终端中输入命令node -v确定是否完全卸载 Node.js，如果显示“command not found”，则表示已经卸载干净。

---

三、启动前端项目

   启动的前端项目以ruoyi前端项目为例。用vscode打开项目RUOYI-UI

   然后根据项目里的README.md文件，初次运行项目需要输入命令npm install安装依赖环境。

   环境安装成功后即可直接输入命令npm run dev启动项目。

   启动成功会浏览器会弹出下图登录框。

总结

   本文主要内容是在已经安装好后端环境的mac pro上搭建前端环境，所以只需要安装vscode，node.js以及npm即可。本文用于演示的前端项目是开源的前后端分离的ruoyi项目。若想在本地看见完整的项目，同时也得启动后端项目。