Trae 使用教程：从安装到实战开发

一、安装与初始配置

1. 下载 Trae：
   • 访问 Trae 官网 Trae 官网，点击“Download”按钮下载安装包。
2. 安装 Trae：
   • 下载完成后，运行安装程序。在安装过程中，你可以选择主题（暗色、亮色、深蓝）和显示语言（简体中文、English）。
   • 如果你之前使用过 VS Code 或 Cursor，可以选择“从 VS Code 导入”或“从 Cursor 导入”，Trae 会自动迁移你的插件、设置和快捷键。
3. 安装 Trae 命令行工具：
   • 安装过程中，点击“安装 trae 命令”按钮，完成授权流程。之后，你可以在终端中使用以下命令快速启动 Trae 或打开项目：
     • trae：快速启动 Trae。
     • trae my-react-app：在 Trae 中打开指定项目。
4. 登录 Trae：
   • 使用手机号或稀土掘金账号登录 Trae，登录后才能使用 AI 服务。

二、Trae 的核心功能

（一）Chat 模式

• 进入 Chat 模式：使用快捷键（macOS：Command + U；Windows：Ctrl + U）打开侧边对话框，点击“Chat”进入 Chat 模式。
• 上下文功能：在输入框中使用 # 键可以引用当前项目中的文件或目录，为 AI 提供更多上下文，提高回答的准确性。
• 代码操作功能：AI 生成的代码片段右上角有四个操作按钮，包括“复制”、“插到光标所在处”、“添加到新文件”和“应用到相应文件”。

（二）Builder 模式

• 启用 Builder 模式：使用快捷键（macOS：Command + U；Windows：Ctrl + U）打开侧边对话框，点击“Builder”启用 Builder 模式。
• 发布需求：在 Builder 模式下，你可以直接输入项目需求，例如“使用 Vue 3 开发一个贪吃蛇游戏”。
• 执行操作：AI 会根据需求生成初始化项目的命令，你只需点击运行按钮即可。AI 会自动创建文件、编写代码，并在过程中询问你的意见。
• 预览效果：项目完成后，AI 会提供一个预览按钮，点击后可以在 Trae 内打开一个 Webview 预览窗口，查看开发成果。

三、实战开发：开发一个 AI Chatbot

（一）初始化项目

1. 编写提示词：编写一个详细的提示词，精确描述项目需求。例如：

   你是一位资深前端工程师，擅长使用 Vue 3 + Vite + TS + Tailwind CSS 开发现代 Web 应用。
   开发一个聊天页面，包含以下功能：
   - 页面背景为白色，文字为黑色。
   - 使用 `main` 标签包裹内容，宽度在屏幕 >780px 时为 780px，否则为 100%。
   - 输入区域底部固定定位，包含一个 `textarea` 输入框和一个发送按钮。
   - 用户聊天气泡：蓝底白字，文字居右。
   - AI 聊天气泡：白底黑字，1px 浅灰色边框，文字居左。

2.  

使用 Builder 模式：打开 Trae，进入一个空目录，切换到 Builder 模式，将上述提示词发送给 AI。AI 会根据提示词生成初始化项目的命令，你只需点击运行按钮即可。

（二）接入 AI 对话功能

1. 1. 编写提示词：继续编写提示词，要求 AI 为项目接入 AI 对话功能。例如：

      我需要你为我的项目接入 aibot，具体要求如下：
      - 在现有聊天页面中集成 LangChain.js，实现与 AI 的对话功能。
      - 支持流式响应（Streaming Response），提升用户体验。
      - 使用 `.env` 文件管理 API 配置，包括 `API_BASE_URL` 和 `API_KEY` 以及 `Model`。

       

      发送需求：将上述提示词发送给 AI，AI 会自动修改代码逻辑，创建 .env 环境变量文件，并添加相应的配置代码。

（三）添加功能扩展

1. 切换模型下拉菜单：继续编写提示词，要求 AI 在输入框上方添加一个下拉菜单，用于切换不同平台的 AI 模型。例如：

   在输入框上方添加一个 `Dropdown` 下拉框菜单，用于切换不同平台的 AI 模型。
   按钮大小为 30x30px，使用设置图标（SVG）。
   点击按钮后显示模型列表，点击列表项切换模型。

    

四、总结