本文主要是介绍MACOS安装配置前端开发环境，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
官网下载安装Mac版本的谷歌浏览器以及VS code代码编辑器，还有在App Store中直接安装Xcode（里面自带git）；
node.js版本管理器nvm的下载安装如下：
参考B站：https://www.bilibili.com/video/BV1M54y1N7fx/?spm_id_from=333.999.0.0&vd_source=ffb65e7592d3826cc440355d28093f39
参考：https://nvm.uihtm.com/#nvm-mac
具体的步骤如下：首先打开终端，进入当前用户的 home 目录中。
cd ~
然后使用 ls -a 显示这个目录下的所有文件（夹）（包含隐藏文件及文件夹），查看有没有 .bash_profile 这个文件。
ls -a
如果没有，则新建一个。
touch ~/.bash_profile
如果有或者新建完成后，我们通过官方的说明在终端中运行下面命令中的一种进行安装：
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
第一次安装会报下面的错误（国内网站无法访问）：
所以可以配置host文件来允许访问（github.com/521xueweihan/Github520）,host文件如下可直接复制：
# GitHub520 Host Start
140.82.113.25 alive.github.com
140.82.112.6 api.github.com
185.199.109.153 assets-cdn.github.com
185.199.111.133 avatars.githubusercontent.com
185.199.111.133 avatars0.githubusercontent.com
185.199.111.133 avatars1.githubusercontent.com
185.199.111.133 avatars2.githubusercontent.com
185.199.111.133 avatars3.githubusercontent.com
185.199.108.133 avatars4.githubusercontent.com
185.199.108.133 avatars5.githubusercontent.com
185.199.111.133 camo.githubusercontent.com
140.82.114.22 central.github.com
185.199.111.133 cloud.githubusercontent.com
140.82.112.10 codeload.github.com
140.82.113.22 collector.github.com
185.199.111.133 desktop.githubusercontent.com
185.199.111.133 favicons.githubusercontent.com
140.82.112.3 gist.github.com
52.216.169.243 github-cloud.s3.amazonaws.com
52.217.171.217 github-com.s3.amazonaws.com
3.5.9.197 github-production-release-asset-2e65be.s3.amazonaws.com
3.5.7.164 github-production-repository-file-5c1aeb.s3.amazonaws.com
52.216.211.161 github-production-user-asset-6210df.s3.amazonaws.com
192.0.66.2 github.blog
140.82.114.3 github.com
140.82.114.18 github.community
185.199.109.154 github.githubassets.com
151.101.193.194 github.global.ssl.fastly.net
185.199.110.153 github.io
185.199.111.133 github.map.fastly.net
185.199.110.153 githubstatus.com
140.82.112.26 live.github.com
185.199.108.133 media.githubusercontent.com
185.199.111.133 objects.githubusercontent.com
13.107.42.16 pipelines.actions.githubusercontent.com
185.199.111.133 raw.githubusercontent.com
185.199.111.133 user-images.githubusercontent.com
140.82.113.21 education.github.com
185.199.111.133 private-user-images.githubusercontent.com# Update time: 2024-08-30T20:08:23+08:00
# Update url: https://raw.hellogithub.com/hosts
# Star me: https://github.com/521xueweihan/GitHub520
# GitHub520 Host End打开终端输入指令：
sudo vi /etc/hosts
然后输入开机密码（不显示，输完直接回车），然后将光标移到最后面
按下 i 键，进入编辑模式
command + v 粘贴刚刚复制的host文件内容
按下 esc 键，退出编辑模式
按出 ：号，输入wq，保存并退出
然后用指令 查看host文件配置是否正确 ：
cat /etc/hosts
再试一下安装nvm脚本命令：
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
没成功多试几次直到成功像下面这样：
紧接着还需要配置环境：
复制上图的提示内容：
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
编辑环境配置指令(我的终端默认是zsh，如果像视频中是bash的话，就运行 vi ~/.bashrc)：
vi ~/.zshrc
按下 i 键，进入编辑模式
command + v 粘贴刚刚复制的内容
按下 esc 键，退出编辑模式
按出 ：号，输入wq，保存并退出
配置好之后，进行环境变量的加载指令(同理是bash，就用source ~/.bashrc)：
source ~/.zshrc
安装完成 输入nvm可以看到成功安装，可以用 nvm ls-remote 指令查看远端提供的node js版本，
如果输入指令报显示 N/A ，在终端执行
export NVM_NODEJS_ORG_MIRROR=http://nodejs.org/dist
然后再运行nvm ls-remote即可显示可用node版本
执行nvm install +版本号即可安装如：
nvm install 18.17.1
打开vscode 在文件夹下打开终端运行第一个react项目（cra）：
npx create-react-app my-app
cd my-app
npm start
由于create-react-app项目已经不再维护，所以babel-preset-react-app依赖的 "@babel/plugin-proposal-private-property-in-object"包可能不再更新，导致出现未声明依赖的错误。执行如下命令解决：
npm install --save-dev @babel/plugin-proposal-private-property-in-object
这篇关于MACOS安装配置前端开发环境的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
