Vibe Vibe

主题

4.1.2 准备你的 AI IDE ​

本小节目标：用 5 分钟确认你的 AI IDE 已准备就绪

确认工具已安装 ​

如果你跟着第一章学习，应该已经选择并安装了一个 AI IDE。

还没安装？请先回顾 1.4 工具选型指南，完成安装后再继续。

重要

本章使用本地安装的 AI IDE 进行开发。请确保你的电脑上已经安装好工具。

熟悉 AI IDE 的界面布局 ​

无论你使用哪款 AI IDE，它们都有相似的界面结构：

┌────────────────────────────────────────────────────────────┐
│                        AI IDE 通用布局                      │
├──────────────┬─────────────────────┬───────────────────────┤
│              │                     │                       │
│   文件区      │      代码区          │       预览区          │
│  (项目文件)   │   (AI生成的代码)      │   (实时效果)          │
│              │                     │                       │
├──────────────┴─────────────────────┴───────────────────────┤
│                        对话区                               │
│               (你输入 Prompt 的地方)                         │
└────────────────────────────────────────────────────────────┘

对话区：你和 AI 沟通的地方 ​

这是最重要的区域。你在这里输入 Prompt（也叫指令、需求描述），AI 会理解你的意图并生成代码。

找到它：通常在界面底部或侧边，有一个输入框，可能标注着 "Ask AI"、"Chat"、"Composer" 等字样。

代码区：AI 生成代码的地方 ​

AI 生成的代码会显示在这里。你通常不需要直接编辑这些代码，但可以查看。

找到它：通常在界面中央，显示着类似 index.html、app.js 这样的文件内容。

文件区：管理项目文件的地方 ​

这里显示项目中的所有文件和文件夹。随着开发推进，你会看到越来越多的文件出现在这里。

找到它：通常在界面左侧，是一个树状的文件列表。

预览区：看到效果的地方 ​

这是最有成就感的区域。你的网页会在这里实时显示。

找到它：通常在界面右侧，可能需要点击 "Preview"、"Run" 或类似按钮才会出现。有些 AI IDE 也支持在浏览器中打开预览。

创建项目文件夹 ​

在开始之前，建议在你的电脑上创建一个专门的项目文件夹：

  1. 打开"文档"或"桌面"文件夹
  2. 创建一个新文件夹，命名为 vibe-coding-projects
  3. 在里面再创建一个子文件夹 todo-list（待办清单项目）

文件夹结构如下：

文档/
└── vibe-coding-projects/
    └── todo-list/        ← 本章项目放这里

💡 为什么要这样做

把项目放在固定位置，方便你以后找到。AI IDE 生成的文件都会保存在这个文件夹里。

在 AI IDE 中打开项目文件夹 ​

  1. 打开你的 AI IDE
  2. 找到"打开文件夹"或"Open Folder"选项
  3. 选择刚才创建的 todo-list 文件夹
  4. 确认打开

现在，你的 AI IDE 应该显示一个空的项目。

验证工具正常：一个简单测试 ​

在对话区输入以下 Prompt，测试工具是否正常工作：

请帮我创建一个简单的网页，显示"Hello, Vibe Coding!"这句话，文字居中，使用蓝色。

预期结果 ​

你应该看到：

  1. AI 开始生成代码（通常是一个 index.html 文件）
  2. 代码区显示生成的 HTML 代码
  3. 文件区出现新的文件
  4. 预览区显示一个网页，上面有蓝色居中的 "Hello, Vibe Coding!" 文字

如果一切正常 ​

恭喜！你的工具已经准备好了。可以直接跳到 4.1.4 最终检查清单。

如果遇到问题 ​

问题可能原因解决方法
对话区没反应网络问题或未登录检查网络连接，确认已登录账号
AI 回复很慢网络延迟耐心等待，或检查网络状况
代码生成了但看不到预览预览未开启找到 "Preview" 或 "Run" 按钮，或在浏览器中打开生成的 HTML 文件
提示额度用完免费额度耗尽查看是否可以购买额度，或等待月度额度刷新
界面全是英文语言设置不影响使用，AI 可以理解中文 Prompt

关于免费额度 ​

大多数 AI IDE 都提供免费额度或试用期。对于本教程的待办清单项目，免费额度通常足够。

如果额度不够：

  1. 查看工具是否有付费选项
  2. 优化你的 Prompt，减少不必要的对话
  3. 等待月度额度刷新

本小节要点 ​

✓ 工具已安装：你的电脑上有一个可用的 AI IDE

✓ 界面已熟悉：知道对话区、代码区、文件区、预览区在哪里

✓ 项目已创建：有一个专门的项目文件夹，AI IDE 已打开这个文件夹

✓ 测试已通过：用 "Hello, Vibe Coding!" 验证了工具正常工作

下一步

工具确认可用后，我们来做最后的环境检查。

→ 4.1.3 工具准备与环境检查