AI微课堂第九期 |Trae AI 零代码编程实战

今天推荐的这款工具——Trae（读作 /treɪ/），由字节跳动出品，完全免费，专门解决"不会编程也想做出软件"的难题。你只需要用中文描述你想做什么，它就能自动帮你生成代码、搭建项目、运行预览。

本期推文将围绕一个真实的社区报名系统案例，带你从零开始，每一步都详细讲解操作过程。

01 Trae 是什么？

3个关键词让你秒懂

02 下载与安装（5分钟搞定）

步骤 1：打开官网下载安装包

在浏览器地址栏输入以下地址，打开 Trae 国内官网：

https://www.trae.cn

点击页面上的「下载 IDE」按钮，网站会自动识别操作系统并推荐对应版本：

步骤 2：运行安装程序

步骤 3：首次启动与初始配置

安装完成后双击桌面图标启动软件，按欢迎向导完成以下设置：

03 认识 Trae 界面布局

（先花2分钟熟悉）

Trae 的界面主要由以下 4个区域 组成，如果你之前用过 VS Code，会发现界面几乎一模一样——因为它就是基于 VS Code 内核开发的，所有操作习惯都可以直接沿用。

04 实战演示：

用 Trae 做一个社区报名系统

我们将用 Trae 从零搭建一个社区报名系统，包含报名表单和后台管理。先看整体流程：

4.1 借助 DeepSeek 生成需求描述

（推荐新手）

第一步，打开 DeepSeek，输入需求

访问 deepseek.com，在对话框中输入：

DeepSeek 会返回结构化的需求描述，包含技术选型、功能模块划分、页面布局说明等。

第二步，复制需求描述

将 DeepSeek 返回的内容全部复制（Ctrl+A 全选，Ctrl+C 复制）。

4.2 直接在 Trae 中描述（更快速）

如果觉得上一步太麻烦，也可以跳过 DeepSeek，直接在 Trae 中用中文描述。两种方法二选一即可。

4.3 打开 Builder 模式，让 AI 动手

❶ 创建新项目

❶ 启动 Trae，点击「新建项目」

❷选择「空白项目」，起名为 community-signup

❸ 选择保存位置，点击「创建」

❷ 切换到 Builder 模式

❶ 按快捷键 Ctrl+U（macOS: Command+U）打开右侧面板

❷ 点击面板顶部的「Builder」标签

❸ 粘贴需求描述，点击发送

在输入框中粘贴需求描述（或直接输入以下内容）：

按 Enter 或点击发送按钮。

❹ 等待 AI 工作（5~10分钟）

这是最激动人心的环节，你会看到 Trae 自动执行以下操作：

❺ 预览效果

代码生成完成后，Trae 会自动打开 Web 预览窗口。你可以：

• 在报名表单中填写信息，点击"提交"测试报名

• 访问后台管理页面，用 admin / admin123 登录

• 查看报名信息列表，测试搜索和筛选功能

4.4 对结果进行微调

效果不满意？直接让 AI 修改，每次修改后自动刷新预览：

4.5 保存和分享你的项目

• 直接使用：双击 index.html 在浏览器中打开

• 部署上线：上传到学校服务器或 GitHub Pages

• 打包分享：压缩成 ZIP 发给同事或学生

05 Chat 模式：

随时提问的编程助手

除了 Builder 模式的"从零搭建"，Trae 的 Chat 模式适合日常随时提问。使用方法：

❶ 按 Ctrl+U 打开右侧面板，切换到「Chat」标签

❷ 用中文输入问题即可

06 这些实用功能也值得关注

⌨ 智能代码补全（CUE）

• Tab 接受补全 | Esc 忽略建议

• Ctrl+Shift+Enter 触发 Pro 补全，推荐下一个改动点

 内嵌对话（Inline Chat）

选中一段代码后按 Ctrl+I，直接在代码旁边弹出对话框提问，无需切换面板。

✅ 处理 AI 代码变更

AI 修改代码后可逐个审查：

 安装插件扩展功能

• 点击左侧边栏「插件」图标（或按 Ctrl+Shift+X）

• 搜索框输入插件名（如"Python""Live Server"）

• 点击「安装」（兼容 VS Code 全部插件）

07 师生实用场景一览

Trae 在大学教学和学习中有丰富应用，以下 7 个场景供参考：

08 常见问题解答

09 本期小结

• 了解 Trae 是什么——字节跳动出品的免费 AI 原生开发环境

• 完成下载、安装和初始配置的全流程

• 通过 Builder 模式从零搭建完整的社区报名系统

• 学会用 Chat 模式随时提问、解释代码、修复报错

• 掌握代码补全、内嵌对话、插件安装等进阶功能