从零到一：利用Trae快速搭建AI对话小步伐页面

媒介

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个模式：

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

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

---

1. 创建项目

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

1. 根据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 模式下输入以下下令：

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

复制代码

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

---

3. 优化交互

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

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

复制代码

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

---

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

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

1. 使用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元。
  
  
  
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。