# 第四章：选择你的第一个工具

> **本章你将学到：** 怎么选适合自己的工具，以及从注册到做出第一个页面的完整操作步骤。

## 选一个开始吧

上一章介绍了不少工具，你可能有点眼花缭乱。没关系，这一章我帮你做一个简单的决策，然后手把手带你走完从注册到"Hello World"的全过程。

记住：**选哪个不重要，开始才重要。** 工具随时可以换，但如果一直在纠结不开始，那才是最大的浪费。

## 决策指南：30 秒选好工具

回答下面这个问题：

**你现在最想怎么样？**

- **"我想最快体验一下，不想装任何东西"** → 去路线 A：Lovable
- **"我想要更好的中文体验，愿意装个软件"** → 去路线 B：Trae
- **"我听说 Cursor 最强，我想用最好的"** → 去路线 C：Cursor

拿不定主意？**从路线 A 开始。** 打开浏览器就能用，3 分钟后你就能看到 AI 帮你生成的第一个页面。

---

## 路线 A：Lovable 上手指南

### 第一步：打开网站，注册账号

1. 在浏览器中打开 https://lovable.dev
2. 点击页面上的 "Sign Up" 或 "Get Started"
3. 你可以用 Google 账号、GitHub 账号或者邮箱注册
4. 注册完成后，你就能看到 Lovable 的主界面了

<!-- screenshot: Lovable 首页，标注注册/登录按钮的位置 -->

### 第二步：认识界面

Lovable 的界面很简洁，主要有三个区域：

- **左边/中间**：你和 AI 的对话区域——你在这里输入你的需求
- **右边**：实时预览——AI 做出来的东西会实时显示在这里
- **底部或侧边**：文件列表——AI 生成的代码文件（你可以不看这里）

<!-- screenshot: Lovable 主界面标注三个区域：对话、预览、文件 -->

### 第三步：你的第一次对话

在对话框里输入：

> 帮我做一个简洁的个人介绍页面，包含：名字（用你自己的名字）、一句自我介绍、三个兴趣爱好标签、联系邮箱。整体风格简洁现代，浅色背景。

然后按回车。

接下来，你会看到 AI 开始工作——右侧的预览区域会逐渐出现一个页面。这个过程通常需要 10-30 秒。

<!-- screenshot: AI 正在生成页面的过程截图 -->

### 第四步：Hello World 时刻！

生成完成后，你会在右侧看到一个完整的个人介绍页面。**恭喜你，这是你用 AI 做出的第一个东西！**

它可能不完美，但它是真实的——你刚刚用一句话"写"出了一个网页。

<!-- screenshot: 生成完成后的个人介绍页面预览 -->

### 第五步：试着修改

现在试试让 AI 修改它。在对话框里输入：

> 把背景色改成浅蓝色，名字的字号再大一些。

看看右边的预览如何变化。

<!-- screenshot: 修改前后的对比效果 -->

感受到了吗？你只是说了一句话，页面就变了。这就是 vibe coding。

---

## 路线 B：Trae 上手指南

### 第一步：下载安装

1. 打开 https://trae.ai 或在搜索引擎搜索"Trae AI"
2. 点击下载按钮，选择你的操作系统（Windows / Mac）
3. 下载完成后，双击安装文件，一路"下一步"就行
4. 打开 Trae，用 Google 账号或邮箱注册登录

<!-- screenshot: Trae 官网下载页面截图 -->

<!-- screenshot: Trae 安装完成后的首次打开界面 -->

### 第二步：认识界面

Trae 的界面和 VS Code 很像（因为它就是基于 VS Code 做的），不过别被看起来复杂的界面吓到。你现在只需要知道两个地方：

- **中间的大面积区域**：代码编辑区（目前还是空的）
- **右侧或底部的对话面板**：这是你和 AI 聊天的地方，找到 "Builder" 或者 AI 对话的图标点进去

<!-- screenshot: Trae 界面标注代码区域和 AI 对话面板 -->

### 第三步：创建你的第一个项目

1. 在 Trae 里新建一个文件夹（File → Open Folder → 选一个你喜欢的位置，新建一个叫 "my-first-project" 的文件夹）
2. 打开 AI 对话面板（Builder 模式）
3. 在对话框里输入和路线 A 一样的需求：

> 帮我在这个项目里创建一个简洁的个人介绍页面，包含：名字、一句自我介绍、三个兴趣爱好标签、联系邮箱。做成一个 index.html 文件。整体风格简洁现代，浅色背景。

Trae 会先"思考"一下（这是它的 Builder 模式的特色），然后在你的项目文件夹里创建文件。

<!-- screenshot: Trae Builder 模式生成代码的过程 -->

### 第四步：预览效果

AI 生成完代码后：
1. 在左侧文件列表里你会看到新创建的 `index.html` 文件
2. 右键点击这个文件 → 选择"Open with Live Server"或者直接双击用浏览器打开
3. 你的个人介绍页面就出现了！

<!-- screenshot: 在浏览器中预览生成的页面 -->

### 第五步：修改迭代

回到 AI 对话面板，输入你的修改需求：

> 把背景色改成浅蓝色渐变，名字用粗体。

AI 会直接修改代码文件。刷新浏览器就能看到效果。

---

## 路线 C：Cursor 上手指南

### 第零步：检查环境

Cursor 需要一些前置工具才能正常运行项目。在开始之前，打开终端检查一下：

```bash
node --version
```

- **如果看到版本号**（比如 `v22.x.x`）→ 你已经准备好了，继续往下
- **如果提示"command not found"** → 你需要先安装 Node.js。回到[第二章的"按路线准备环境"](02-what-you-need.md#按路线准备环境)部分，找到"路线 B：编辑器端工具"，按步骤安装好再回来

### 第一步：下载安装

1. 打开 https://cursor.com
2. 点击 "Download"，选择你的操作系统
3. 下载完成后安装
4. 打开 Cursor，用 Google 或 GitHub 账号注册登录
5. 新用户会自动获得 7 天 Pro 试用

<!-- screenshot: Cursor 官网下载页面 -->

### 第二步：认识界面

Cursor 的界面同样基于 VS Code。关键区域：

- **中间**：代码编辑区
- **AI 对话面板**：按 `Ctrl+I`（Windows）或 `Command+I`（Mac）打开 Composer——这是你和 AI 对话的核心入口

<!-- screenshot: Cursor 界面标注 Composer 对话面板 -->

### 第三步：创建你的第一个项目

1. File → Open Folder → 新建并打开一个叫 "my-first-project" 的文件夹
2. 按 `Ctrl+I`（Windows）或 `Command+I`（Mac）打开 Composer
3. 输入需求（和前面两个路线相同）
4. Cursor 会在你的项目里生成代码文件

<!-- screenshot: Cursor Composer 生成代码的过程 -->

### 第四步：预览和修改

预览方式和 Trae 类似——打开生成的 HTML 文件在浏览器中查看。修改就继续在 Composer 里和 AI 对话。

### 第五步（可选）：安装几个好用的插件

Cursor 继承了 VS Code 丰富的插件生态。以下是几个对新手特别有用的插件，能让你的开发体验更好。安装方法：点击左侧边栏的"扩展"图标（四个方块的图标），搜索插件名称，点击"安装"即可。

<!-- screenshot: Cursor 左侧边栏扩展图标位置 -->

**推荐安装：**

| 插件 | 作用 | 为什么推荐 |
|------|------|-----------|
| Chinese Language Pack | 中文语言包 | 把界面变成中文，看着更舒服 |
| Prettier | 代码格式化 | 自动把代码排列整齐，不用手动调格式 |
| vscode-icons | 文件图标主题 | 给不同类型的文件加上好看的图标，方便区分 |
| Live Server | 本地预览服务器 | 右键 HTML 文件即可在浏览器预览，修改后自动刷新 |
| ESLint | 代码检查 | 自动发现代码中的常见问题 |
| GitLens | Git 增强 | 方便查看代码的修改历史（第八章学 Git 时会用到） |

> **不想装也没关系。** 插件只是锦上添花，不装也完全不影响 vibe coding。等你用熟了再回来挑选自己需要的也行。

---

## 环境验证：确认一切就绪

不管你选了哪条路线，做完上面的步骤后，花 30 秒确认一下：

**路线 A（Lovable）：**
- [ ] 能打开 Lovable 网站
- [ ] 能输入需求并看到 AI 生成的页面预览

→ 全部打勾？你已经准备好了！

**路线 B（Trae）：**
- [ ] Trae 能正常打开
- [ ] 能打开 AI 对话面板
- [ ] 输入需求后能看到 AI 生成代码

→ 全部打勾？你已经准备好了！

**路线 C（Cursor）：**
- [ ] `node --version` 能显示版本号
- [ ] Cursor 能正常打开
- [ ] 能打开 Composer（`Command+I` 或 `Ctrl+I`）
- [ ] 输入需求后能看到 AI 生成代码

→ 全部打勾？你已经准备好了！

有问题？看看下面的 FAQ。

---

## 常见问题 FAQ

### 注册时需要信用卡吗？

不需要。以上三个工具的注册都不需要信用卡。Lovable 和 Trae 有免费额度可以直接使用，Cursor 新用户有 7 天 Pro 试用。

### 免费额度用完了怎么办？

几个选择：
- 换一个工具继续用（比如 Lovable 额度用完了换 Trae）
- 等下个月额度刷新
- 如果觉得好用，考虑付费（最便宜的 Trae Pro 首月只要 $3）

### 网页打不开 / 下载很慢怎么办？

如果你在国内，有些工具的网站可能访问不太顺畅。几个建议：
- Lovable 和 Cursor 可能需要稳定的网络环境
- **Trae 对国内用户最友好**——字节跳动出品，国内访问没有问题
- 下载慢的话，可以试试在不同时段下载

### AI 生成的结果和教程里不一样，正常吗？

完全正常！AI 每次生成的结果都会有些不同，即使你输入一模一样的文字。就像你问两个人同一个问题，他们的回答也不会完全一样。重要的是整体方向对就行，细节可以通过继续对话来调整。

### 我可以两个都试试吗？

当然可以！事实上我鼓励你这样做。先花 5 分钟在 Lovable 上体验一下（不需要安装），然后再装一个 Trae 或 Cursor 感受一下编辑器端工具的不同。两种体验对比一下，你就知道自己更喜欢哪种了。

### Trae 安全吗？它会不会把我的代码泄露出去？

Trae 是字节跳动开发的产品，对于个人学习项目来说不需要太担心。不过如果你将来做涉及公司机密或敏感信息的项目，建议仔细阅读它的隐私政策，或者换用其他工具。

### Homebrew 安装失败或特别慢怎么办？

国内用户访问 GitHub 可能比较慢，导致 Homebrew 安装卡住。你可以使用国内镜像来安装：

```bash
/bin/bash -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"
```

按提示选择一个镜像源（推荐中科大或清华），等待安装完成即可。

### 输入 `node` 命令提示"command not found"？

这通常是因为 Node.js 没有被添加到系统的"查找路径"（PATH）里。几种解决办法：

1. **先关掉终端再重新打开试试**——很多时候安装后需要重新打开终端才能生效
2. **Mac 用户：** 如果用 Homebrew 安装的，试试执行 `brew link node`
3. **Windows 用户：** 重新运行 Node.js 安装包，确认勾选了"Add to PATH"选项，然后重启电脑

### Windows 上终端该用哪个？

Windows 有好几种终端，新手容易搞混：

- **Windows Terminal**（推荐）：Windows 11 自带，Windows 10 在 Microsoft Store 免费下载。界面现代，支持多标签页
- **PowerShell**：Windows 自带，功能齐全，是目前 Windows 的默认终端
- **命令提示符（cmd）**：老版终端，功能较少，不推荐使用

本教程里的所有终端命令在 Windows Terminal 和 PowerShell 里都能正常运行。

### 安装时提示需要管理员权限怎么办？

- **Mac：** 终端会提示你输入密码。输入你开机时用的密码就行（输入时屏幕上不会显示任何字符，这是正常的，直接输完按回车）
- **Windows：** 弹出"是否允许此应用对设备进行更改"的窗口，点击"是"就行

### Windows 上安装了工具但终端里找不到？

这是 Windows 用户最常遇到的问题。原因几乎都是同一个：**PATH 没有配好**。

**快速解决：**
1. 先试试**关掉终端再重新打开**
2. 如果还不行，**重启电脑**
3. 如果还不行，重新运行安装程序，找到 "Add to PATH" 的选项确保勾选

**手动添加 PATH（进阶）：** 如果上面的方法都不行，你可以手动添加：
1. 按 `Win + S` 搜索"环境变量"，点击"编辑系统环境变量"
2. 点击"环境变量"按钮
3. 在"用户变量"或"系统变量"中找到 `Path`，双击编辑
4. 添加对应工具的安装路径（比如 Node.js 默认在 `C:\Program Files\nodejs\`）
5. 确定保存，重新打开终端

> 如果你觉得手动配 PATH 太复杂，最简单的办法就是**卸载后重新安装，安装时注意勾选所有 PATH 相关选项**。

## 本章小结

- 不要纠结选工具，用起来最重要
- **Lovable**：打开浏览器就能用，最适合"先试试看"
- **Trae**：中文支持好、免费额度多、价格便宜，国内用户首选
- **Cursor**：功能最全面的 AI 编程编辑器，适合长期使用
- 用一句话描述你想要的东西 → AI 帮你做出来 → 继续对话修改

## 下一步预告

你已经有了工具，也做出了第一个页面。但你可能发现，AI 做出来的东西"差不多"但还不够好。下一章是整个教程最核心的内容——如何更好地和 AI 对话，让它做出更接近你心中所想的东西。