从空白到交互:用Trae快速搭建uni-app AI对话小程序页面

我正在参加Trae「超级体验官」创意实践征文,本文所使用的 Trae 免费下载链接:
www.trae.ai/?utm_source...


前言

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

bash 复制代码
根据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 模式下输入以下命令:

bash 复制代码
基于当前项目结构,实现一个AI对话的 uni-app 小程序。

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


3. 优化交互

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

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

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


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

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

bash 复制代码
使用marked和richtext支持渲染markdown的逻辑,并支持代码高亮。

总结

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

项目亮点

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

完整源码

github.com/Moonofweish...

相关链接

相关推荐
GOTXX3 分钟前
BoostSiteSeeker项目实战
前端·c++·后端·mysql·搜索引擎·项目实战·boost
山青花欲燃31010 分钟前
React 对接流式接口实现
前端·llm
LaoZhangAI12 分钟前
【2025最新】Gemini 2.5 Pro完全指南:强大推理能力提升8大应用场景实战效率
前端
平凡的阿泽19 分钟前
uniapp编译的app在ios上内存泄漏了
uni-app
晓风伴月23 分钟前
Css:如何解决绝对定位子元素内容被父级元素overflow:hidden属性剪裁
前端·css·overflow裁剪
Carlos_sam23 分钟前
OpenLayers:海量图形渲染之矢量切片
前端·javascript
Nexmoe24 分钟前
20 万行代码:我们如何构建和维护大规模 AI 原型系统
前端
zhangxingchao24 分钟前
Andrdoid中常用的JVM知识整理
前端
海底火旺25 分钟前
聊一聊JavaScript中的立即执行函数(IIFE)
前端·javascript
76756047925 分钟前
useMemoize 方法源码解读与实战应用
前端·源码