开发环境配置
在开始开发之前，我们需要确保你的电脑已经安装了所有必要的开发工具和软件。本章节将一步一步指导你完成环境配置的全过程。
| 章节 | 内容 | 预计耗时 | 难度 |
|---|---|---|---|
| 网络环境配置 | 科学上网配置、网络环境测试 | 5分钟 |  |
| 安装 Homebrew | Homebrew安装 | 5分钟 |  |
| 安装必要软件 | Node.js、Git等软件安装 | 30分钟 | |
网络环境配置
⚠️ 重要提示：在开始安装任何开发工具之前，请先确保你的电脑可以正常访问国际网络。
为什么网络环境这么重要？
在开发过程中，我们需要频繁访问国外服务器来：
- 安装开发工具：Homebrew、Node.js、Git 等
- 下载依赖包：大部分 npm 包都在国外服务器
- 访问代码仓库：GitHub 代码拉取和提交
- 查阅开发文档：大量英文技术文档和 Stack Overflow
不配置科学上网会遇到什么问题？
| 问题类型 | 具体表现 |
|---|---|
| 🚫 安装失败 | • Homebrew 安装可能需要几个小时 • npm 包经常下载超时 • Git 代码拉取极其缓慢 |
| 🚫 使用镜像的弊端 | • 需要配置多个镜像源（Homebrew/Node.js/Git） • 镜像源版本可能滞后 • 部分包无法通过镜像下载 • 镜像源可能突然无法使用 |
| 🚫 开发体验差 | • 无法正常使用 VS Code 插件 • GitHub Copilot 无法连接 • Stack Overflow 无法访问 • AI 开发工具无法使用 |
推荐配置方案 ✨
如果你使用 ClashX Pro：
-
开启系统代理
- 选择 “Set as system proxy” 或 “Enhanced Mode”
- 确保终端也走代理
-
选择合适节点
- 使用非中国大陆节点
- 优先选择延迟低的节点
-
验证网络环境
# 测试是否能正常访问国外网站
curl google.com
curl github.com💡 如果你还没有合适的科学上网工具，请参考账号注册指南中的科学上网部分。
💪 最佳实践：配置好网络环境可能需要花费一些时间和费用，但从长远来看，这是值得的投资。它能让你的开发过程更加顺畅，避免在后续开发中遇到各种令人烦恼的问题。
安装 Homebrew
Homebrew 是 macOS 上最流行的包管理工具，就像 Mac 的应用商店一样，可以帮助我们方便地安装和管理各种开发软件。
-
打开终端，使用 Spotlight 搜索（按下 Command + 空格键），输入 “Terminal” 并回车
-
复制并执行以下命令来安装 Homebrew：
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"💡 提示：安装过程中可能会要求输入你的电脑密码，这是正常的。
Homebrew 基础使用指南
Homebrew 安装完成后，你就拥有了一个强大的软件包管理工具。它的使用非常简单，这里介绍一些最常用的命令：
# 安装软件
brew install 软件名
# 搜索软件
brew search 关键词
# 查看已安装的软件
brew list
# 更新所有软件
brew upgrade
# 更新指定软件
brew upgrade 软件名
# 卸载软件
brew uninstall 软件名
# 查看软件信息
brew info 软件名
# 查看所有可用命令
brew help💡 小贴士：Homebrew 会自动处理软件的依赖关系，你不需要手动安装依赖项
安装必要软件
安装 Node.js
Node.js 是我们开发所需的基础运行环境。
- 使用 Homebrew 安装 Node.js：
brew install node
# 验证安装
node --version # 应显示 v20.x.x
npm --version # 应显示 v10.x.x关于 npm
npm 就像是一个超大的应用商店，专门用来下载和管理 JavaScript 代码包。当你安装 Node.js 时，npm 会自动安装，不需要单独安装。
npm 能做什么？
- 下载别人写好的代码
# 就像在应用商店下载应用一样
npm install 包名 # 在当前项目中安装
npm install -g 包名 # 在电脑上全局安装- 管理项目中用到的代码包
- 所有用到的代码包都记录在一个叫
package.json的文件里 - 团队其他成员可以直接用这个文件一键安装所有需要的包
- 就像是一个购物清单，记录了项目需要的所有”配料”
- 最常用的命令
# 新建一个项目（就像新建一个菜谱）
npm init
# 根据"购物清单"安装所有需要的包
npm install
# 运行项目中定义好的命令
npm run dev # 启动开发服务器
npm run build # 打包项目
npm run test # 运行测试
# 删除不需要的包
npm uninstall 包名- 分享你的代码
- 你也可以把自己写的代码上传到 npm 商店
- 让其他开发者也能使用你的代码
- 这就是为什么 npm 上有超过 100 万个代码包
🌟 新手提示：
- npm 就像是程序员界的淘宝，里面有各种现成的代码包
- 不需要自己写所有代码，很多功能都可以直接下载使用
- 比如要做一个漂亮的按钮，可以直接用 npm 安装别人做好的组件
💡 小贴士：虽然 npm 很好用，但在我们的项目中会用 pnpm 来代替它，因为 pnpm 更快、更省空间。不过原理都是一样的！
安装 Git
使用 Homebrew 安装 Git：
brew install git安装 pnpm
pnpm 是一个快速、节省磁盘空间的包管理器，我们推荐使用它来管理项目依赖。
# 使用 npm 全局安装 pnpm
npm install -g pnpm
# 验证安装
pnpm --version # 应显示 8.x.x安装 nvm
nvm (Node Version Manager) 可以帮助你在同一台电脑上管理多个 Node.js 版本。
# 使用 Homebrew 安装 nvm
brew install nvm
# 创建 nvm 工作目录
mkdir ~/.nvm
# 将以下配置添加到你的 ~/.zshrc 或 ~/.bash_profile 文件中
echo 'export NVM_DIR="$HOME/.nvm"' >> ~/.zshrc
echo '[ -s "/opt/homebrew/opt/nvm/nvm.sh" ] && \. "/opt/homebrew/opt/nvm/nvm.sh"' >> ~/.zshrc
echo '[ -s "/opt/homebrew/opt/nvm/etc/bash_completion.d/nvm" ] && \. "/opt/homebrew/opt/nvm/etc/bash_completion.d/nvm"' >> ~/.zshrc
# 重新加载配置文件
source ~/.zshrc
# 验证安装
nvm --version安装 Python
macOS 虽然预装了 Python，但我们建议使用 Homebrew 安装最新版本：
# 安装 Python
brew install python
# 验证安装
python3 --version # 应显示 3.x.x
pip3 --version # 应显示 pip 版本号安装 PostgreSQL
PostgreSQL 是一个强大的开源关系型数据库：
# 安装 PostgreSQL
brew install postgresql@14
# 启动 PostgreSQL 服务
brew services start postgresql@14
# 验证安装
psql --version
# 创建默认数据库
createdb `whoami`💡 提示：PostgreSQL 安装完成后会自动创建一个与你的系统用户同名的超级用户。
🔔 注意：如果你之前没有使用过 PostgreSQL，建议先熟悉一下基本的数据库操作命令。你可以使用
psql命令进入 PostgreSQL 命令行界面进行练习。