前言

自从其知名度以来，AI再次将其带到了公众眼中。 TRAE是由启动的AI本机综合开发环境（IDE），与AI深入集成，提供智能的问答，自动代码完成，并基于AI自动编程功能。使用TRAE开发项目时，开发人员可以灵活地与AI合作以提高发展效率。我们怎么能放开这样一个好工具，更不用说它是免费的（狗头）了！

本文将带您体验如何快速构建AI对话小程序页面，该页面支持流式响应并在30分钟内使用TRAE渲染。完整的技术堆栈是：VUE3 + +。

影响

让我们首先查看效果（可以在文章末尾获得完整的源代码）

安装

TRAE的安装过程非常简单。您可以直接在官方网站上下载安装程序包，并根据提示完成安装。它可以同步VS代码的设置，并且非常方便。我有点不开心。它只有3种主题颜色可供选择，它们都很丑陋，但这并不重要。让我们先忍受它。毕竟，它是免费的-3.5，您还想要什么其他自行车？

Note：您需要准备一个可以访问国际网络以完成帐户登录的代理环境。登录完成后，您可以随便使用它。

使用

我已经使用了诸如此类的工具，并且我总是觉得Trae的智力在体验后略微不如它们。但是，Trae的易用性和集成仍然很好。毕竟，它是免费的-3.5，您还想要什么？如果收费，我可以说这有问题。现在我只能说我不会问（狗头）。打开trae后，使用组合键盘 + u或ctrl + u唤起侧面AI助手，该助手具有2种模式：

聊天模式：这是编码过程中的全面AI合作伙伴，可用于回答编码问题，解释代码存储库，生成代码段，修复错误等。模式：此模式可以帮助您从0到1开发完整的项目。您可以将其无缝集成到项目构建过程中。在模式下，AI助手将根据需要在需要时调用不同的工具，包括分析代码文件的工具，编辑代码文件的工具，运行命令的工具等。这使得答案更加准确有效。

让我们看一下如何使用TRAE模式快速构建Uni-App AI对话程序小程序页面。

1。创建一个项目

首先，我们要创建一个Uni-App项目。在这里，我建议使用我常用的技术堆栈：VUE3 ++，因此我们首先在TRAE模式下输入以下命令：

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

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

我们可以看到，目前TRAE帮助我们创建了一个完整的页面并生成了相应的代码。

3。优化交互

AI并非一次生成文本，因此我们需要支持对最新内容的平滑滚动，并且输入框当前将遵循滚动，因此我们需要TRAE来优化：

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

目前，一个简单的聊天页面还处于起步阶段。

4。支持渲染和代码突出显示

接下来，我们要使用和支持渲染，在TRAE模式下输入以下命令：

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

总结

通过使用TRAE模式，我们可以在短短几十分钟内完成一个完整的Uni-App AI对话小程序页面，这无疑可以极大地提高我们的发展效率。我们可以将他视为一个非常听话的弟弟，我们为他编写了开发设计，他将完成要求，我们将再次做。当然，TRAE还具有许多功能，例如代码完成，智能问答等。有兴趣的朋友可以自己探索它。

项目亮点：

完成源代码

相关的链接建议