Mac 前端开发环境搭建详细教程（国内镜像版）
前言
Windows系统用吐了🤮，实在受不了了，换了一个Mac, 结果一开始环境就让人抓狂了，整理了一个文档。
本教程适用于 macOS 系统（ Ventura/Monterey/Big Sur 通用），全程使用国内镜像源（清华、淘宝）加速下载，避免官方源超时问题，涵盖前端开发核心环境（包管理、Node.js 版本控制、常用工具），新手可直接跟随步骤操作。
一、准备工作
1.1 打开终端
- 快捷键：Command + 空格 召唤「聚焦搜索」，输入「终端」打开
- 或：Finder → 应用程序 → 实用工具 → 终端
1.2 安装 Xcode 命令行工具（必装，解决编译依赖）
终端输入以下命令，弹出安装窗口后点击「安装」，等待完成（无需安装完整 Xcode）：
xcode-select --install
Bash
二、安装 Homebrew（Mac 包管理器）
Homebrew 是 Mac 必备包管理工具，可快速安装 / 卸载开发软件，以下是国内镜像安装步骤。
2.1 卸载旧版本（如有）
若之前安装过 Homebrew，先清理残留（无旧版本可跳过）：
# 卸载命令，回车后按提示输入密码确认/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/uninstall.sh)"
Plain Text
2.2 用清华镜像安装最新版
终端粘贴以下命令，回车后输入电脑密码（输入时密码不显示，正常现象，输完回车即可）：
# 清华镜像安装脚本，速度超快
/bin/bash -c "$(curl -fsSL https://mirrors.tuna.tsinghua.edu.cn/git/homebrew/install.git)"
Bash
2.3 配置永久镜像源（避免后续下载慢）
依次输入以下 4 行命令，每行输完回车（配置清华镜像源，永久生效）：
# 配置 brew 本体镜像echo 'export HOMEBREW_BREW_GIT_REMOTE="https://mirrors.tuna.tsinghua.edu.cn/git/homebrew/brew.git"' >> ~/.zshrc# 配置 brew 核心包镜像echo 'export HOMEBREW_CORE_GIT_REMOTE="https://mirrors.tuna.tsinghua.edu.cn/git/homebrew/homebrew-core.git"' >> ~/.zshrc# 配置预编译包镜像（加速下载）echo 'export HOMEBREW_BOTTLE_DOMAIN="https://mirrors.tuna.tsinghua.edu.cn/homebrew-bottles"' >> ~/.zshrc# 生效配置source ~/.zshrc
Plain Text
2.4 验证安装
终端输入以下命令，显示版本号即安装成功：
brew -v# 成功示例：Homebrew 4.2.21
Plain Text
三、安装 nvm（Node.js 版本管理器）
nvm 用于管理多个 Node.js 版本，解决多项目版本冲突问题，搭配淘宝镜像加速下载。
3.1 卸载旧版本（如有）
清理旧版 nvm 残留（无旧版本可跳过）：
rm -rf ~/.nvm # 删除 nvm 安装目录sed -i '' '/NVM_DIR/d' ~/.zshrc # 删除环境变量配置source ~/.zshrc # 生效清理
Plain Text
3.2 用淘宝镜像安装 nvm
终端粘贴以下命令，自动下载安装最新稳定版 nvm：
curl -o- https://cdn.npm.taobao.org/dist/nvm/v0.39.7/install.sh | bash
Bash
3.3 配置 nvm 环境变量（关键步骤）
依次输入以下 3 行命令，确保终端能识别 nvm 命令：
# 配置 nvm 安装目录echo 'export NVM_DIR="$HOME/.nvm"' >> ~/.zshrc# 加载 nvm 核心脚本echo '[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"' >> ~/.zshrc# 加载 nvm 命令补全（可选，推荐）echo '[ -s "$NVM_DIR/bash_completion" ] && . "$NVM_DIR/bash_completion"' >> ~/.zshrc# 生效配置source ~/.zshrc
Plain Text
3.4 配置 nvm 国内镜像（加速 Node 下载）
终端输入以下命令，配置 Node 下载源为淘宝镜像：
echo 'export NVM_NODEJS_ORG_MIRROR="https://cdn.npm.taobao.org/dist/node"' >> ~/.zshrcsource ~/.zshrc # 生效配置
Plain Text
3.5 验证安装
终端输入以下命令，显示版本号即安装成功：
nvm -v# 成功示例：0.39.7
Plain Text
四、安装 Node.js 与 npm（前端运行环境）
Node.js 是前端代码运行环境，npm 是 Node 自带的包管理器，用 nvm 安装可灵活切换版本。
4.1 安装稳定版 Node.js
终端输入以下命令，自动下载最新稳定版（国内镜像加速）：
nvm install stable # stable 表示稳定版，也可指定版本（如 nvm install 18.17.0）
Plain Text
4.2 设置默认 Node 版本
避免每次打开终端都要切换版本，设置默认版本：
nvm alias default stable # 将稳定版设为默认
Plain Text
4.3 配置 npm 国内镜像（永久生效）
npm 默认官方源下载慢，替换为淘宝镜像（现更名为 npmmirror）：
# 配置 npm 镜像源npm config set registry https://registry.npmmirror.com# 验证配置是否成功npm config get registry# 成功示例：https://registry.npmmirror.com/
Plain Text
4.4 验证安装
分别输入以下命令，均显示版本号即成功：
node -v # 查看 Node 版本（示例：v20.12.2）npm -v # 查看 npm 版本（示例：10.5.0）
Plain Text
五、安装常用前端开发工具
用 Homebrew 一键安装前端必备工具，全程国内镜像加速。
5.1 版本控制工具：Git
# 安装 Gitbrew install git# 验证安装git -v # 示例：git version 2.43.0
Plain Text
5.2 代码编辑器：VS Code
# 安装 VS Code（--cask 表示安装图形化应用）brew install --cask visual-studio-code# 验证：安装完成后在「启动台」找到 VS Code 图标
Plain Text
5.3 调试浏览器：Google Chrome
# 安装 Chromebrew install --cask google-chrome# 验证：启动台找到 Chrome 图标
Plain Text
5.4 高效包管理器：pnpm（可选，替代 npm）
# 用 npm 全局安装 pnpmnpm install -g pnpm# 验证安装pnpm -v # 示例：8.15.4
Plain Text
5.5 接口调试工具：Postman
# 安装 Postmanbrew install --cask postman
Bash
六、环境验证：创建 React 项目测试
搭建完成后，通过创建 React 项目验证环境是否正常工作。
6.1 创建 React 项目
终端输入以下命令，用国内镜像加速依赖下载：
# 创建名为 test-app 的 React 项目（需等待 1-3 分钟）npx create-react-app test-app
Plain Text
6.2 启动项目
# 进入项目目录cd test-app# 启动开发服务器npm start
Plain Text
6.3 验证结果
- 命令执行后，自动打开浏览器，显示 React 默认页面（ http://localhost:30 00 ）
- 页面正常显示 → 环境搭建成功！
七、常见问题排查
7.1 终端提示「command not found: brew/nvm/node」
- 原因：环境变量配置未生效
- 解决：重新执行生效命令 source ~/.zshrc，或关闭终端重新打开
7.2 安装时卡在「Downloading...」
- 原因：镜像源配置失败
- 解决：重新执行对应组件的镜像配置命令（如 Homebrew、nvm 镜像步骤）
7.3 权限错误「Permission denied」
- 解决：命令前加 sudo（如 sudo brew install git），输入电脑密码即可
附录：常用命令速查表
| 工具 | 操作 | 命令 |
|---|---|---|
| Homebrew | 安装软件 | brew install 软件名 |
| Homebrew | 卸载软件 | brew uninstall 软件名 |
| Homebrew | 更新所有软件 | brew update && brew upgrade |
| nvm | 安装指定 Node 版本 | nvm install 版本号（如 nvm install 16.20.0） |
| nvm | 切换 Node 版本 | nvm use 版本号 |
| nvm | 查看已安装版本 | nvm ls |
| npm | 安装项目依赖 | npm install |
| npm | 全局安装包 | npm install -g 包名 |
| npm | 卸载包 | npm uninstall 包名 |
| Git | 配置用户名（首次） | git config --global user.name "你的名字" |
| Git | 配置邮箱（首次） | git config --global user.email "你的邮箱" |
