牛马程序员

Appearance

2.4 第一次对话：验证环境 ​

确保一切就绪

2.4.1 为什么要验证环境 ​

在正式开始 Vibe Coding 之前，我们需要确保环境配置正确。

就像开车前要检查油量和轮胎一样，验证环境可以帮你：

  • 确认 AI 功能正常工作
  • 熟悉基本的对话流程
  • 建立信心，为后续学习打好基础

这一节，我们会通过几个简单的任务来验证你的 Trae 环境是否就绪。

2.4.2 测试一：简单对话 ​

让我们从最简单的对话开始。

操作步骤：

  1. 打开 Trae
  2. 按 Ctrl+L（Windows）或 Cmd+L（Mac）打开 AI 面板
  3. 在输入框中输入：
你好，请介绍一下你自己
  1. 按回车发送

预期结果：

AI 应该在几秒内回复，介绍自己是一个 AI 编程助手，可以帮助你完成各种编程任务。

验证点

  • AI 能正常回复 ✓
  • 回复是中文 ✓
  • 响应时间在 10 秒内 ✓

如果 AI 正常回复了，说明基本的对话功能已经就绪。

2.4.3 测试二：代码生成 ​

接下来测试 AI 的代码生成能力。

操作步骤：

  1. 在 AI 面板中输入：
用 JavaScript 写一个函数，计算两个数的和
  1. 按回车发送

预期结果：

AI 应该生成类似这样的代码：

javascript
function add(a, b) {
  return a + b;
}

验证代码：

你可以继续问 AI：

请给我一个使用这个函数的例子

AI 应该给出示例代码，比如：

javascript
console.log(add(3, 5)); // 输出: 8

验证点

  • AI 能生成代码 ✓
  • 代码格式正确 ✓
  • 能理解后续问题 ✓

2.4.4 测试三：创建文件 ​

现在测试 AI 创建文件的能力。

准备工作：

  1. 点击"文件" → "打开文件夹"
  2. 创建或选择一个空文件夹作为测试项目

操作步骤：

  1. 切换到 Builder 模式（在 AI 面板中切换）
  2. 输入：
创建一个 hello.html 文件，显示"Hello, Vibe Coding!"
  1. 按回车发送

预期结果：

AI 应该：

  1. 创建 hello.html 文件
  2. 文件内容包含基本的 HTML 结构
  3. 页面显示"Hello, Vibe Coding!"

验证方法：

  1. 在左侧文件浏览器中，应该能看到新创建的 hello.html
  2. 双击打开文件，查看内容
  3. 右键文件，选择"在浏览器中打开"，查看效果

验证点

  • AI 能创建文件 ✓
  • 文件出现在项目中 ✓
  • 内容符合要求 ✓

2.4.5 测试四：修改代码 ​

测试 AI 修改现有代码的能力。

操作步骤：

  1. 确保 hello.html 文件已打开
  2. 在 AI 面板中输入：
把页面背景改成浅蓝色，文字改成深蓝色，居中显示
  1. 按回车发送

预期结果：

AI 应该修改 hello.html，添加 CSS 样式：

  • 背景色变成浅蓝色
  • 文字变成深蓝色
  • 内容居中显示

验证方法：

刷新浏览器中的页面，查看样式是否生效。

验证点

  • AI 能理解修改需求 ✓
  • 能正确修改现有文件 ✓
  • 修改结果符合预期 ✓

2.4.6 测试五：多文件项目 ​

最后，测试 AI 处理多文件项目的能力。

操作步骤：

  1. 在 Builder 模式下输入：
创建一个简单的计数器：
- index.html：页面结构
- style.css：样式文件
- script.js：逻辑代码
- 点击按钮数字加1，再点击减1的按钮数字减1
  1. 按回车发送

预期结果：

AI 应该创建三个文件：

  • index.html：包含页面结构，引用 CSS 和 JS
  • style.css：包含样式
  • script.js：包含计数器逻辑

验证方法：

  1. 检查三个文件是否都已创建
  2. 在浏览器中打开 index.html
  3. 点击按钮，验证计数器功能是否正常

验证点

  • AI 能创建多个文件 ✓
  • 文件之间正确关联 ✓
  • 功能正常工作 ✓

2.4.7 常见问题排查 ​

如果测试过程中遇到问题，可以参考以下解决方案：

问题一：AI 没有响应

可能原因：

  • 网络连接问题
  • 未登录账号

解决方法：

  • 检查网络连接
  • 确认已登录 Trae 账号
  • 尝试重启 Trae

问题二：AI 响应很慢

可能原因：

  • 网络延迟
  • 选择的模型较大

解决方法：

  • 切换到响应更快的模型（如 doubao-1.5-pro）
  • 检查网络状况

问题三：文件没有创建成功

可能原因：

  • 没有打开项目文件夹
  • 权限问题

解决方法：

  • 确保已打开一个文件夹作为项目
  • 检查文件夹的写入权限

问题四：代码运行报错

可能原因：

  • AI 生成的代码有小问题
  • 文件引用路径错误

解决方法：

  • 把错误信息发给 AI，让它帮你修复
  • 检查文件引用路径是否正确

2.4.8 本节小结 ​

核心要点

  1. 测试对话：确认 AI 能正常回复
  2. 测试代码生成：确认 AI 能生成正确的代码
  3. 测试文件创建：确认 AI 能创建新文件
  4. 测试代码修改：确认 AI 能修改现有代码
  5. 测试多文件项目：确认 AI 能处理多文件协作
  6. 遇到问题：把错误信息发给 AI，让它帮你解决

如果以上测试都通过了，恭喜你！你的 Vibe Coding 环境已经完全就绪。

从下一章开始，我们将正式学习如何写出高质量的提示语，让 AI 更好地理解你的意图。