第四章：选择你的第一个工具
本章你将学到： 怎么选适合自己的工具，以及从注册到做出第一个页面的完整操作步骤。
选一个开始吧
上一章介绍了不少工具，你可能有点眼花缭乱。没关系，这一章我帮你做一个简单的决策，然后手把手带你走完从注册到"Hello World"的全过程。
记住：选哪个不重要，开始才重要。 工具随时可以换，但如果一直在纠结不开始，那才是最大的浪费。
决策指南：30 秒选好工具
回答下面这个问题：
你现在最想怎么样？
- "我想最快体验一下，不想装任何东西" → 去路线 A：Lovable
- "我想要更好的中文体验，愿意装个软件" → 去路线 B：Trae
- "我听说 Cursor 最强，我想用最好的" → 去路线 C：Cursor
拿不定主意？从路线 A 开始。 打开浏览器就能用，3 分钟后你就能看到 AI 帮你生成的第一个页面。
路线 A：Lovable 上手指南
第一步：打开网站，注册账号
- 在浏览器中打开 https://lovable.dev
- 点击页面上的 "Sign Up" 或 "Get Started"
- 你可以用 Google 账号、GitHub 账号或者邮箱注册
- 注册完成后，你就能看到 Lovable 的主界面了
第二步：认识界面
Lovable 的界面很简洁，主要有三个区域：
- 左边/中间：你和 AI 的对话区域——你在这里输入你的需求
- 右边：实时预览——AI 做出来的东西会实时显示在这里
- 底部或侧边：文件列表——AI 生成的代码文件（你可以不看这里）
第三步：你的第一次对话
在对话框里输入：
帮我做一个简洁的个人介绍页面，包含：名字（用你自己的名字）、一句自我介绍、三个兴趣爱好标签、联系邮箱。整体风格简洁现代，浅色背景。
然后按回车。
接下来，你会看到 AI 开始工作——右侧的预览区域会逐渐出现一个页面。这个过程通常需要 10-30 秒。
第四步：Hello World 时刻！
生成完成后，你会在右侧看到一个完整的个人介绍页面。恭喜你，这是你用 AI 做出的第一个东西！
它可能不完美，但它是真实的——你刚刚用一句话"写"出了一个网页。
第五步：试着修改
现在试试让 AI 修改它。在对话框里输入：
把背景色改成浅蓝色，名字的字号再大一些。
看看右边的预览如何变化。
感受到了吗？你只是说了一句话，页面就变了。这就是 vibe coding。
路线 B：Trae 上手指南
第一步：下载安装
- 打开 https://trae.ai 或在搜索引擎搜索"Trae AI"
- 点击下载按钮，选择你的操作系统（Windows / Mac）
- 下载完成后，双击安装文件，一路"下一步"就行
- 打开 Trae，用 Google 账号或邮箱注册登录
第二步：认识界面
Trae 的界面和 VS Code 很像（因为它就是基于 VS Code 做的），不过别被看起来复杂的界面吓到。你现在只需要知道两个地方：
- 中间的大面积区域：代码编辑区（目前还是空的）
- 右侧或底部的对话面板：这是你和 AI 聊天的地方，找到 "Builder" 或者 AI 对话的图标点进去
第三步：创建你的第一个项目
- 在 Trae 里新建一个文件夹（File → Open Folder → 选一个你喜欢的位置，新建一个叫 "my-first-project" 的文件夹）
- 打开 AI 对话面板（Builder 模式）
- 在对话框里输入和路线 A 一样的需求：
帮我在这个项目里创建一个简洁的个人介绍页面，包含：名字、一句自我介绍、三个兴趣爱好标签、联系邮箱。做成一个 index.html 文件。整体风格简洁现代，浅色背景。
Trae 会先"思考"一下（这是它的 Builder 模式的特色），然后在你的项目文件夹里创建文件。
第四步：预览效果
AI 生成完代码后：
- 在左侧文件列表里你会看到新创建的
index.html文件 - 右键点击这个文件 → 选择"Open with Live Server"或者直接双击用浏览器打开
- 你的个人介绍页面就出现了！
第五步：修改迭代
回到 AI 对话面板，输入你的修改需求：
把背景色改成浅蓝色渐变，名字用粗体。
AI 会直接修改代码文件。刷新浏览器就能看到效果。
路线 C：Cursor 上手指南
第零步：检查环境
Cursor 需要一些前置工具才能正常运行项目。在开始之前，打开终端检查一下：
node --version- 如果看到版本号（比如
v22.x.x）→ 你已经准备好了，继续往下 - 如果提示"command not found" → 你需要先安装 Node.js。回到第二章的"按路线准备环境"部分，找到"路线 B：编辑器端工具"，按步骤安装好再回来
第一步：下载安装
- 打开 https://cursor.com
- 点击 "Download"，选择你的操作系统
- 下载完成后安装
- 打开 Cursor，用 Google 或 GitHub 账号注册登录
- 新用户会自动获得 7 天 Pro 试用
第二步：认识界面
Cursor 的界面同样基于 VS Code。关键区域：
- 中间：代码编辑区
- AI 对话面板：按
Ctrl+I（Windows）或Command+I（Mac）打开 Composer——这是你和 AI 对话的核心入口
第三步：创建你的第一个项目
- File → Open Folder → 新建并打开一个叫 "my-first-project" 的文件夹
- 按
Ctrl+I（Windows）或Command+I（Mac）打开 Composer - 输入需求（和前面两个路线相同）
- Cursor 会在你的项目里生成代码文件
第四步：预览和修改
预览方式和 Trae 类似——打开生成的 HTML 文件在浏览器中查看。修改就继续在 Composer 里和 AI 对话。
第五步（可选）：安装几个好用的插件
Cursor 继承了 VS Code 丰富的插件生态。以下是几个对新手特别有用的插件，能让你的开发体验更好。安装方法：点击左侧边栏的"扩展"图标（四个方块的图标），搜索插件名称，点击"安装"即可。
推荐安装：
| 插件 | 作用 | 为什么推荐 |
|---|---|---|
| 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 安装卡住。你可以使用国内镜像来安装：
/bin/bash -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"按提示选择一个镜像源（推荐中科大或清华），等待安装完成即可。
输入 node 命令提示"command not found"？
这通常是因为 Node.js 没有被添加到系统的"查找路径"（PATH）里。几种解决办法：
- 先关掉终端再重新打开试试——很多时候安装后需要重新打开终端才能生效
- Mac 用户： 如果用 Homebrew 安装的，试试执行
brew link node - 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 没有配好。
快速解决：
- 先试试关掉终端再重新打开
- 如果还不行，重启电脑
- 如果还不行，重新运行安装程序，找到 "Add to PATH" 的选项确保勾选
手动添加 PATH（进阶）： 如果上面的方法都不行，你可以手动添加：
- 按
Win + S搜索"环境变量"，点击"编辑系统环境变量" - 点击"环境变量"按钮
- 在"用户变量"或"系统变量"中找到
Path，双击编辑 - 添加对应工具的安装路径（比如 Node.js 默认在
C:\Program Files\nodejs\） - 确定保存，重新打开终端
如果你觉得手动配 PATH 太复杂，最简单的办法就是卸载后重新安装，安装时注意勾选所有 PATH 相关选项。
本章小结
- 不要纠结选工具，用起来最重要
- Lovable：打开浏览器就能用，最适合"先试试看"
- Trae：中文支持好、免费额度多、价格便宜，国内用户首选
- Cursor：功能最全面的 AI 编程编辑器，适合长期使用
- 用一句话描述你想要的东西 → AI 帮你做出来 → 继续对话修改
下一步预告
你已经有了工具，也做出了第一个页面。但你可能发现，AI 做出来的东西"差不多"但还不够好。下一章是整个教程最核心的内容——如何更好地和 AI 对话，让它做出更接近你心中所想的东西。