环境准备

用 AI 工具前，先把基础环境准备好。我的建议是不要在这步追求完美，能跑起来就行，后面随时可以升级。

快速版：3 步搞定环境

第 1 步：检查已装了什么

打开终端（Mac 用 Terminal，Windows 用 PowerShell），运行：

node --version
pnpm --version
git --version

有版本号输出的就是装好了。三条命令都出了版本号？直接跳到第一个项目。缺了哪个往下看。

第 2 步：装缺少的工具

Mac 用户：

# 先装 Homebrew（Mac 的包管理器）
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

# 然后用 Homebrew 一键安装
brew install node pnpm git

Windows 用户：

# 装 Node.js LTS（安装包会附带 npm）
winget install OpenJS.NodeJS.LTS

# 用 npm 装 pnpm
npm install -g pnpm

# 装 Git
winget install Git.Git

Chrome 不管 Mac 还是 Windows，直接去 google.cn/chrome 下载安装就行。

如果你不确定用哪个包管理器，Mac 推荐 Homebrew，Windows 用 winget，都是各自系统最省心的方案。不要手动去官网一个个下载安装包，那样更容易搞错版本。

第 3 步：验证全部装好

再次运行检查命令：

node --version
pnpm --version
git --version

三条都有版本号输出，环境就准备好了。整个过程快的 3 分钟，慢的 10 分钟。

详细说明：每个工具是干什么的

用 AI 工具之前，电脑上得先有这几样东西：

工具	干嘛的
Chrome	调试网页、看 Console 报错、装开发插件
Node.js	跑前端项目的基础运行环境
pnpm	给项目装依赖
Git	存代码、管版本、回退改动

检查一下有没有装好：

node --version
pnpm --version
git --version

有版本号输出就说明装好了。没装的话：

Node.js：去官网下 LTS 版本，双击安装
pnpm：npm install -g pnpm
Git：Mac 执行 git --version 会自动提示安装；Windows 去 Git 官网下载
Homebrew（Mac 包管理器，装其他工具会用到）：

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

各工具安装详细说明

Node.js： LTS 版本就是长期支持版，稳定、坑少。非前端开发者可能会问"我为什么需要 Node.js"——因为大多数 AI 编程工具和开发环境都依赖它来运行。装好之后你还能用 npm（Node 自带的包管理器）装其他工具。

pnpm： 我用 pnpm 而不是 npm，因为 pnpm 安装速度更快、占磁盘空间更少。它在背后做了硬链接和内容寻址存储，同一个依赖包多个项目共用一份，不会重复下载。如果你已经装了 npm，一行命令 npm install -g pnpm 就能切过去。

Git： Git 不只是用来上传 GitHub 的。对 AI 编程来说，Git 最大的价值是"随便改，改坏了能回退"。AI 可能一次性改很多文件，有 Git 你就敢放手让它改，不满意就 git checkout . 还原。每做一个新功能前先 git add 和 git commit，这是最基本的保护。

Chrome： 调试 AI 生成的网页时，Chrome 的开发者工具（F12）是最常用的——看 Console 报错、检查元素样式、调网络请求。装一个 React Developer Tools 插件对调试 AI 生成的前端代码很有帮助。

不想手动装：让 AI 帮你搞定

如果你不想自己看文档判断，直接把下面这段发给任何 AI 工具（比如 Codex、Trae、Cursor、ChatGPT）：

帮我检查一下这台电脑装了 Chrome、Node.js、pnpm、Git 没有，没装的帮我装上。

AI 会先检查你的系统环境，告诉你缺什么，然后给你安装命令。你只需要复制粘贴运行就行。

更具体的需求也可以丢给 AI：

我是在 Mac / Windows 上做前端开发，帮我从零配好 Node.js、pnpm、Git 和 Chrome 环境。
只用 LTS 版本，告诉我每一步的命令。

用这种方式，你同时也在练习"怎么给 AI 提需求"——这个技能在后面的项目中会反复用到。

编辑器怎么选

这三个编辑器是目前 AI 编程最主流的，装一个就够了：

编辑器	推荐理由
Trae	国内可用、中文界面友好，适合新手。内置 AI 对话和代码补全
VS Code	免费、稳定、插件生态最丰富。适合想要长期使用的人
Cursor	AI 编程体验最流畅，适合有经验且接受付费的用户

我的建议： 如果你是第一次接触 AI 编程，从 Trae 或 VS Code 开始。Trae 国内用起来最省心，不需要考虑网络问题。Cursor 虽然体验更好，但需要付费订阅，建议先做完两三个项目确定自己会持续用再买。

编辑器选一个装着：Trae（国内友好）、VS Code（免费稳定插件多）、Cursor（习惯了就继续用）。

不想自己判断的话，把这段发给任何 AI 工具：

帮我检查一下这台电脑装了 Chrome、Node.js、pnpm、Git 没有，没装的帮我装上

接下来你可以：

确认 Chrome、Node.js、pnpm、Git 已安装，三条命令都输出版本号
挑一个编辑器装好（Trae / VS Code / Cursor）
有 Git 就运行 git config --global user.name "你的名字" 和 git config --global user.email "你的邮箱" 配好用户信息
继续第一个 AI 辅助项目

On this page