第 2 章：工具链配置与环境搭建
🪢
🎯 本章目标：
掌握主流 Vibe Coding 工具的选择
完成最强 AI IDE —— Cursor 的安装与优化配置
了解模型选择策略，并亲手完成第一个 Vibe Coding 任务
2.1 主流 Vibe Coding 工具对比
在 Vibe Coding 的世界里，"工欲善其事，必先利其器"。根据你的需求和背景，选择合适的工具能让你事半功倍。
五大主流工具对比
#tSZQHEFhobrB text { white-space: pre; }#tSZQHEFhobrB .fb0 { stroke: var(--N900-FG, 0.15); }#tSZQHEFhobrB .fb0 {stroke: rgba(31,35,41, 0.15)}#tSZQHEFhobrB .fx0 { stroke-miterlimit: 10; }#tSZQHEFhobrB .fx0 {stroke-miterlimit: 10}#tSZQHEFhobrB .fa1 { fill: rgb(187, 191, 196); }#tSZQHEFhobrB .fa1 {fill: rgb(187, 191, 196)}#tSZQHEFhobrB .fx1 { font: 400 12px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#tSZQHEFhobrB .fx1 {font-style: normal}#tSZQHEFhobrB .fx2 { text-anchor: middle; }#tSZQHEFhobrB .fx2 {text-anchor: middle}#tSZQHEFhobrB .fx3 { dominant-baseline: central; }#tSZQHEFhobrB .fx3 {dominant-baseline: central}#tSZQHEFhobrB .fx4 { stroke: none; }#tSZQHEFhobrB .fx4 {stroke: none}#tSZQHEFhobrB .fc0 { fill: var(--text-caption); }#tSZQHEFhobrB .fc0 {fill: #646a73}#tSZQHEFhobrB .fa2 { fill: var(--text-link-disabled); }#tSZQHEFhobrB .fa2 {fill: rgb(187, 191, 196)}#tSZQHEFhobrB .fx5 { font: 400 13px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#tSZQHEFhobrB .fx5 {font-style: normal}#tSZQHEFhobrB .fx6 { text-anchor: start; }#tSZQHEFhobrB .fx6 {text-anchor: start}#tSZQHEFhobrB .fx7 { dominant-baseline: alphabetic; }#tSZQHEFhobrB .fx7 {dominant-baseline: alphabetic}#tSZQHEFhobrB .fc1 { fill: rgb(0, 0, 0); }#tSZQHEFhobrB .fc1 {fill: rgb(0, 0, 0)}#tSZQHEFhobrB .fb1 { fill: var(--N900-FG, 0.15); }#tSZQHEFhobrB .fb1 {fill: rgba(31,35,41, 0.15)}#tSZQHEFhobrB .fb2 { fill: rgb(209, 217, 224); }#tSZQHEFhobrB .fb2 {fill: rgb(209, 217, 224)}#tSZQHEFhobrB .fa3 { fill: var(--bg-body); }#tSZQHEFhobrB .fa3 {fill: #fff}ABCDE123456工具CursorWindsurfClaude CodeReplitBolt.new核心定位AI 原生 IDEAgent 驱动 IDE终端命令行机器人云端 IDE浏览器全栈生成核心优势与 IDE 深度集成，代码库索引（Codebase）极强核心 Cascade Flow 深度理解上下文，自动化更彻底毫秒级响应，直接操作文件系统和 Git即开即用，自带部署，协作方便描述需求即生成全栈 Web 项目缺点每月 Pro 额度有限相对新，生态完善中无可视化界面，适合熟练工离线工作不便定制化和调试相对受限推荐指数⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
为什么选择 Cursor 作为入门首选？
如果你是第一次体验 Vibe Coding，Cursor 是绝对的最佳选择。
•
零学习成本：它完全基于 VS Code 开发，所有插件和快捷键都能无缝迁移。
•
上下文感知：它能"读懂"你的整个项目代码，而不仅仅是当前文件。
•
多模型支持：随时切换 Claude 3.5 Sonnet、GPT-4o、Gemini 等顶尖模型。
•
Composer 模式：目前市面上体验最流畅的"自动写代码"功能。
2.2 Cursor 安装与核心功能配置
第一步：安装
访问 cursor.com。
点击 Download 下载对应系统的安装包（Windows/macOS/Linux）。
安装并登录账号。建议初学者先使用 Free 计划，每个月有 2000 次补全和基础配额。
第二步：核心快捷键（必记！）
在 Cursor 中，掌握以下三个快捷键就掌握了 80% 的能力：
•
Ctrl + K (Windows) / Cmd + K (Mac)：编辑代码。在代码框或侧边栏直接提需求，修改当前选中的代码块。
•
Ctrl + L (Windows) / Cmd + L (Mac)：聊天提问。在侧边栏询问代码逻辑、Bug 方案或新技术点。
•
Ctrl + I (Windows) / Cmd + I (Mac)：Composer (全工程编辑)。这是 Vibe Coding 的大杀器！你可以告诉它："帮我写一个完整的功能"，它会自动跨文件修改代码。
第三步：项目索引 (Indexing) - 让 AI 读懂你的项目
为了让 Cursor 了解你的代码，一定要确保项目已经索引：
进入 Settings -> General -> Indexing。
确保状态是 "Indexed"。这样当你使用 @Codebase (通过 Ctrl/Cmd + Enter 呼出) 时，AI 才能精准结合上下文回答。
⚠️ Troubleshooting：如果发现 AI 经常"胡编乱造"不存在的函数，或者完全不了解你的其他文件，请首先检查这里是否显示为 "Unindexed" 或索引失效。
2.3 模型选择与性能优化
Vibe Coding 的效果很大程度上取决于你使用的模型。
2025 年模型天梯（代码向 - 2025/12 更新）
#yhDOBqVOoTcN text { white-space: pre; }#yhDOBqVOoTcN .fb0 { stroke: var(--N900-FG, 0.15); }#yhDOBqVOoTcN .fb0 {stroke: rgba(31,35,41, 0.15)}#yhDOBqVOoTcN .fx0 { stroke-miterlimit: 10; }#yhDOBqVOoTcN .fx0 {stroke-miterlimit: 10}#yhDOBqVOoTcN .fa1 { fill: rgb(187, 191, 196); }#yhDOBqVOoTcN .fa1 {fill: rgb(187, 191, 196)}#yhDOBqVOoTcN .fx1 { font: 400 12px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#yhDOBqVOoTcN .fx1 {font-style: normal}#yhDOBqVOoTcN .fx2 { text-anchor: middle; }#yhDOBqVOoTcN .fx2 {text-anchor: middle}#yhDOBqVOoTcN .fx3 { dominant-baseline: central; }#yhDOBqVOoTcN .fx3 {dominant-baseline: central}#yhDOBqVOoTcN .fx4 { stroke: none; }#yhDOBqVOoTcN .fx4 {stroke: none}#yhDOBqVOoTcN .fc0 { fill: var(--text-caption); }#yhDOBqVOoTcN .fc0 {fill: #646a73}#yhDOBqVOoTcN .fa2 { fill: var(--text-link-disabled); }#yhDOBqVOoTcN .fa2 {fill: rgb(187, 191, 196)}#yhDOBqVOoTcN .fx5 { font: 400 13px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#yhDOBqVOoTcN .fx5 {font-style: normal}#yhDOBqVOoTcN .fx6 { text-anchor: start; }#yhDOBqVOoTcN .fx6 {text-anchor: start}#yhDOBqVOoTcN .fx7 { dominant-baseline: alphabetic; }#yhDOBqVOoTcN .fx7 {dominant-baseline: alphabetic}#yhDOBqVOoTcN .fc1 { fill: rgb(0, 0, 0); }#yhDOBqVOoTcN .fc1 {fill: rgb(0, 0, 0)}#yhDOBqVOoTcN .fb1 { fill: var(--N900-FG, 0.15); }#yhDOBqVOoTcN .fb1 {fill: rgba(31,35,41, 0.15)}#yhDOBqVOoTcN .fb2 { fill: rgb(209, 217, 224); }#yhDOBqVOoTcN .fb2 {fill: rgb(209, 217, 224)}#yhDOBqVOoTcN .fa3 { fill: var(--bg-body); }#yhDOBqVOoTcN .fa3 {fill: #fff}ABCD123456模型名称Claude Opus 4.5Claude Sonnet 4.5GPT-5.2GLM-4.7Gemini 3.0 Pro推荐等级👑 宇宙最强⚡ 日常首选🧠 深度思考🚀 国产之光📚 无限上下文特点2025 年底发布的"怪物级"模型，SWE-bench 评分 80%+，几乎像真人高级工程师速度比 Opus 快，智商依旧在线，性价比极高逻辑推理能力进一步增强，擅长解决未知领域的难题API 价格极低，代码能力直逼 Claude Sonnect 4.5 级别，开源界的奇迹上下文窗口再次突破，甚至能"吃下"整个框架源码适用场景复杂系统架构、Agent 自动化任务、核心算法实现日常功能开发、代码补全、快速迭代数学/算法攻坚、极度复杂的 Debug个人开发者、海量代码生成、预算敏感型遗留代码库重构、超长文档分析
💡 配置建议
•
首选配置：日常开发使用 Claude Sonnet 4.5（速度快），遇到难题切换到 Claude Opus 4.5（能力强）。
•
省钱技巧：大量生成的非关键代码（如编写测试用例、简单 CRUD）可以使用 GLM-4.7。
•
关于 API Key：如果你有自己的 OpenAI 或 Anthropic API Key，可以在 Settings -> Models 中填入，这样可能更经济（适合重度使用者），但通常不如官方 Pro 订阅稳定。
2.4 你的第一个 Vibe Coding 体验
纸上谈兵终觉浅，我们来通过一个**"酷炫倒计时器"**项目，感受 Vibe Coding 的魅力。
目标
创建一个带动画效果的网页倒计时器，用户可以输入目标日期，页面实时更新。
实战步骤
准备环境：新建一个文件夹（例如 my-vibe-timer），用 Cursor 打开。
启动 Composer：按下 Ctrl + I (Mac: Cmd + I)。你会看到一个悬浮的编辑器窗口出现在屏幕中央，这就是你的"AI 结对编程伙伴"。
输入 Vibe 指令：
"请帮我写一个酷炫的网页倒计时器。要求：
a.
使用单文件 index.html 实现，包含 CSS 和 JS。
接受修改：点击 "Apply" (或 Save All)。你会看到编辑器中代码被自动写入，绿色高亮代表新增内容。
预览效果：右键 index.html 选择 "Open with Live Server" (或直接双击文件)。
遇到问题怎么办？
如果背景颜色你不喜欢，或者按钮没反应，不要去改代码！ 直接在 Composer 里接着说：
•
"背景改成深色调，按钮加个悬浮发光效果。"
•
"修复一下开始按钮点第二次没反应的 Bug。"
这就是 Vibe Coding 的节奏：对话 -> 预览 -> 迭代。
💪 动手练习
环境配置检查：确认你的 Cursor 已经成功登录，并切换到了 Claude Sonnet 4.5 或 Opus 模型。
扩展第一个项目：在刚才的倒计时器基础上，给它增加一个"重置"功能，并让它在倒计时结束时播放一段声音。
体验多模型对比：同一个需求，试着切换到 GPT-5.2 重新生成一次，看看代码逻辑和 UI 设计有什么不同。
📝 本章小结
表格加载中...