从零到一：使用Trae快速搭建AI对话小程序页面

不如摸鱼去

已于 2025-02-24 13:44:58 修改

阅读量2.1k

点赞数 18

分类专栏： uni-app开发实践文章标签： uni-app 人工智能小程序考研

于 2025-02-22 18:38:03 首次发布

本文链接：https://blog.csdn.net/qq_31647491/article/details/145798895

版权

uni-app开发实践专栏收录该内容

15 篇文章

订阅专栏

前言

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 模式下输入以下命令：

根据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还有很多功能，比如代码补全、智能问答等，感兴趣的小伙伴可以自行探索。

项目亮点：