前言

DeepSeek 爆火以来，将AI又一次带到了大众视野。而Trae，作为字节跳动推出的AI原生集成开发环境（IDE），与 AI 深度集成，提供智能问答、代码自动补全以及基于 Agent 的 AI 自动编程能力。使用 Trae 开发项目时，开发者可以与 AI 灵活协作，提升开发效率。这样的好工具，我们怎么可能放过，更何况它还是免费的(狗头)！

本文将带你体验如何用Trae在30分钟内快速搭建一个支持流式响应、Markdown渲染的AI对话小程序页面，完整技术栈为：Vue3 + TypeScript + WotUI。

---

效果

我们先看效果（完整源码可在文末获取）

---

安装

Trae的安装过程很简单，直接在官网下载安装包，然后按照提示完成安装即可，它可以同步VS Code和Cursor的设置，很方便。有一点很不爽，它只有3个主题色可选，而且都还挺丑的，不过没关系，我们先忍一忍，毕竟免费的claude-3.5，还要啥自行车呢。

⚠️ 注意：需准备可访问国际网络的代理环境完成账号登录，登录完成之后就可以随便使用了。

---

使用

在此之前我也使用过cursor、GitHub Copilot等工具，Trae的聪明程度体验下来总感觉稍逊他们一筹，不过Trae的易用性和集成度还是不错的，毕竟是免费的claude-3.5，还要啥自行车呢，如果它收费我可以说是它有问题，现在只能说是我不会问（狗头）。打开Trae之后使用组合键盘Command + U或Ctrl + U就可以唤起侧边的AI助手，它有2个模式：

1. Chat 模式：是编码过程中的全能 AI 伙伴，可以用来回答编码问题、讲解代码仓库、生成代码片段、修复错误等。
2. Builder 模式：此模式可以帮助你从 0 到 1 开发一个完整的项目。你可以将它无缝融入到项目构建的流程中。在 Builder 模式下，AI 助手在回答时会根据需求调用不同的工具，包括分析代码文件的工具、编辑代码文件的工具、运行命令的工具等等。从而让回答更精确、更有效。

下面我们来看看如何使用Trae的Builder 模式快速搭建一个uni-app AI对话小程序页面。

---

1. 创建项目

首先我们要创建一个uni-app项目，这里我推荐使用我常用的技术栈：Vue3+Typescript+WotUI，所以我们先在Trae的Builder 模式下输入以下命令：

根据wot组件库的[快速上手](https://wot-design-uni.cn/guide/quick-use.html)，使用pnpm create uni@latest -t wot-demo，快速创建一个基于 Wot UI 组件库的uni-app项目。

Trae会根据我们输入的需求帮助我们创建完整的项目，并安装相应的依赖。

---

2. 创建页面

接下来我们创建一个AI对话页面，在Trae的Builder 模式下输入以下命令：

基于当前项目结构，实现一个AI对话的 uni-app 小程序。

我们可以看到此时Trae已经帮我们创建了一个完整的页面，并生成了相应的代码。

---

3. 优化交互

AI生成文字并非一次性全量输出的，所以我们要支持平滑滚动到最新的内容，而检察下来输入框目前会跟随滚动所以我们需要Trae进行优化：

将chat页面样式交互优化一下，聊天输入框要固定在底部，mock数据要模拟流式响应

此时，一个简单的聊天页面就初具雏形了。

---

4. 支持Markdown渲染和代码高亮

接下来我们要使用marked和richtext支持Markdown渲染，在Trae的Builder 模式下输入以下命令：

使用marked和richtext支持渲染markdown的逻辑，并支持代码高亮。

---

总结

通过使用Trae的Builder 模式，我们可以在短短几十分钟内完成一个完整的 uni-app AI对话小程序页面，这无疑大大提高了我们的开发效率。我们可以把他当做一个十分听话的小弟来看，我们给他写开发设计，他来完成需求，我们再进行Review。当然Trae还有很多功能，比如代码补全、智能问答等，感兴趣的小伙伴可以自行探索。

项目亮点：

• 全程使用AI辅助开发
• 支持流式响应效果
• 实现Markdown渲染+代码高亮
• 完整的移动端交互体验

---

完整源码

https://github.com/Moonofweisheng/trae-ai-demo

相关链接

• WotUI 组件库文档
• create-uni 脚手架
• Trae 官网

推荐

• 推荐一个使用Wot UI开发的，2025考研调剂小程序：调剂宝。
  注册输入福利码：uh3p，立减20元。