Trae 辅助下的 uni-app 跨端小程序工程化开发实践分享

大家好,我是不如摸鱼去,欢迎来到我的AI编程分享专栏。

这次来分享一下,我使用 Trae 作为主要AI编程工具,开发 uni-app 跨平台小程序的完整实践经验。我在实际的开发过程中,探索了 Trae 辅助开发的具体应用场景和效果,整理出一套相对完整的开发流程和工具链集成方案。

在这个项目中,我们使用Trae作为主要AI编程工具,集成FigmaAlova 网络请求框架、WotUI 组件库等现代化工具,通过 AI 辅助实现了开发效率的显著提升,在本案例中整体开发时间从传统的 40 人日缩短至 22 人日,效率提升约 45%。根据团队的实际体验,相比传统开发方式,开发体验有了明显改善。

本文使用的 Trae 为国际版,目前 Trae 已经内置了 Figma 插件,可以尝试直接使内置的 Figma 插件来还原 UI,本文所写项目为使用 Figma MCP 实现。

相关文章

本文可以结合以下几篇往期文章食用,它们中很多是本文的基础,想要AI编程真正达到提效目的,前置工作还是有必要的:

当年偷偷玩小霸王,现在偷偷用 Trae Solo 复刻坦克大战

告别 HBuilderX,拥抱现代化!这个模板让 uni-app 开发体验起飞

uni-app 还在手写请求?alova 帮你全搞定!

llms.txt:让 AI 更好地理解你的文档

设计师画个图,AI直接写出代码!AI + Figma MCP让前端开发效率暴增80%

用 AI 驱动 wot-design-uni 开发小程序


为什么选择 AI 辅助开发?

传统开发遇到的痛点

在传统开发场景下,存在很多场景可以使用 AI 来接管:

  1. 设计稿还原耗时:UI 设计到代码实现需要大量手工转换
  2. API 集成重复工作:接口类型定义、Mock 数据生成等重复性工作
  3. 测试用例的编写:测试用例编写非常耗时

我们的解决思路

核心理念:让 AI 处理重复性工作,人专注于业务逻辑

具体策略:

  • 利用 Figma MCP 实现设计稿到代码的半自动化转换
  • 基于 Swagger 文档自动生成 API 类型和调用代码
  • 通过 trae + llms.txt 文档集成让 AI 理解项目的组件库和开发规范
  • 等等

上游依赖对 AI 编程效果的关键影响

在我们的实践中发现,以下上游依赖的完整性和规范性直接影响 AI 辅助开发的效果,大致分为:

  • 设计稿完整性
  • 需求文档完整性
  • API 文档完整性
  • 组件库对 AI 支持的完整性

技术选型与工具链

开发工具选择

  • Trae 国际版:核心开发环境,提供 AI 代码生成和智能提示
  • Figma MCP:设计稿到代码的转换工具
  • @alova/wormhole:API 工程化和编辑器集成

技术栈选择

小程序开发当然要选个好的基础模板,这次我选用我在维护的 uni-app vue3 模板 wot-demo https://github.com/wot-ui/wot-demo 来作为基础项目进行开发,这样更加贴合实际开发场景。
wot-demo 主要由以下开源包组成:

  • 核心:@uni-helper
  • 引擎:uni-app
  • 打包器:Vite
  • CSS 样式:UnoCSS
  • 代码质量:ESLint 和 TypeScript:
  • 组件库:Wot UI
  • CI/CD:uni-mini-ci
  • 路由:uni-mini-router
  • 网络请求:Alova
  • Pinia:Pinia

配置指南

我们首先对 Trae 进行一些配置:包括figma mcp、文档集、规则等,使 Trae 的开发思路更加符合我们的要求。

1. 配置 figma mcp

figma mcp 有多种配置方式,可以参考文章:设计师画个图,AI直接写出代码!AI + Figma MCP让前端开发效率暴增80%。这里我们直接使用 figma 官方提供的 Figma Dev Mode MCP。

目前也可以使用 trae 提供的内置的 figma 插件,即可不进行此配置。

前置要求
  • 计划要求:Professional、Organization 或 Enterprise 计划
  • 席位要求:Dev 或 Full 席位
  • 应用要求:必须使用 Figma beta 版桌面应用,下载链接:https://www.figma.com/downloads/
步骤 1:启用 Figma 桌面应用的 MCP 服务
  1. 更新应用:确保 Figma 桌面应用为最新的beta版本
  2. 打开设计文件:创建或打开一个 Figma Design 文件
  3. 访问菜单:点击左上角的 Figma 菜单
  4. 启用服务:在 Preferences 下选择 Enable Dev Mode MCP Server
  5. 确认运行:底部应显示确认消息,表明服务器已启用并运行

📍 重要:服务器将在本地运行于 http://127.0.0.1:3845/mcp,请记住此地址用于下一步配置。

步骤 2:在 Trae 中配置

按照如下操作,打开AI功能管理->MCP

选择手动配置

填入以下配置

{"mcpServers": {"Figma Dev Mode MCP": {"type": "sse","url": "http://127.0.0.1:3845/mcp"}}
}

看到如下图,Figma MCP 即可使用了,其他 MCP 接入方案也大同小异

2. 配置 Trae 规则

还是AI功能管理设置界面,我们选中“规则”页签,设置项目规则即可。

编辑项目规则,填入以下规则,然后保存即可

# 项目开发规则## 项目概述
本项目是基于 uni-app + Vue 3 + TypeScript 的跨平台应用,使用 wot-design-uni 组件库构建。## 核心技术栈
- **框架**: uni-app (Vue 3 + TypeScript)
- **UI组件库**: wot-design-uni
- **请求库**: alova
- **路由**: uni-mini-router + @uni-helper/vite-plugin-uni-pages (文件路由)
- **状态管理**: pinia
- **样式**: UnoCSS + @uni-helper/unocss-preset-uni
- **构建工具**: Vite
- **代码规范**: ESLint + Prettier + husky## 目录结构规范### src/api/ - API管理
- `core/` - Alova核心配置- [instance.ts](mdc:src/api/core/instance.ts) - Alova实例配置- [handlers.ts](mdc:src/api/core/handlers.ts) - 请求处理器- [middleware.ts](mdc:src/api/core/middleware.ts) - 中间件
- `mock/` - Mock数据- `modules/` - 按模块分类的Mock数据- `utils/` - Mock工具函数
- [createApis.ts](mdc:src/api/createApis.ts) - API生成配置
- [index.ts](mdc:src/api/index.ts) - API导出### src/components/ - 全局组件
- 全局通用组件目录
- 包含 GlobalToast、GlobalLoading、GlobalMessage 等全局交互组件### src/composables/ - 组合式函数
- 可复用的逻辑函数
- 命名格式: `use[功能名称].ts`### src/layouts/ - 布局模板
- [default.vue](mdc:src/layouts/default.vue) - 默认布局
- [tabbar.vue](mdc:src/layouts/tabbar.vue) - 底部导航布局### src/pages/ - 页面文件
- 基于文件的路由系统
- 每个页面目录包含 `index.vue` 文件
- 支持 `<route>` 自定义块配置路由元数据### src/store/ - 状态管理
- Pinia store 文件
- [persist.ts](mdc:src/store/persist.ts) - 持久化配置### src/utils/ - 工具函数
- 通用工具函数库## 配置文件
- [pages.config.ts](mdc:pages.config.ts) - 页面和tabbar配置
- [alova.config.ts](mdc:alova.config.ts) - Alova配置
- [uno.config.ts](mdc:uno.config.ts) - UnoCSS配置
- [theme.json](mdc:src/theme.json) - 主题配置
- [vite.config.ts](mdc:vite.config.ts) - Vite构建配置## 开发规范
1. 页面文件必须放在 `src/pages/` 目录下
2. 组件按通用性分类存放在 `src/components/` 或 `src/business/`
3. API 接口使用 Alova 生成,通过 `pnpm alova-gen` 命令生成
4. 样式优先使用 UnoCSS,支持响应式设计和主题切换
5. 使用 TypeScript 提供完整的类型定义

3. 配置文档集

还是AI功能管理界面,我们定位到上下文页签,选择添加文档集

填入https://wot-design-uni.cn/llms-full.txt即可

开发流程

整个项目的开发大致可以总结为以下五个阶段:

项目初始化

原则:架构设计靠人工,标准实现靠 AI

项目结构设计(人工主导)

这里我们直接选择 wot-demo 作为项目基础架构,代码结构如下

src/
├── components/              # 通用基础组件
├── business/               # 业务组件
├── composables/            # 组合式 API
├── store/                  # Pinia 状态管理
├── utils/                  # 工具函数
├── api/                    # API 层(Alova 自动生成)
├── pages/                  # 主包页面
├── pagesBase/             # 基础功能页面(子包)
├── pagesSubA/             # 模块A功能页面(子包)
├── pagesSubB/              # 模块B功能页面(子包)
└── static/                # 静态资源
基础组件开发(AI 擅长)

适合 AI 开发的组件类型:

  • 基于设计图的 UI 组件
  • 逻辑简单的展示组件
  • 纯函数工具方法

示例:基础卡片组件

<script setup lang="ts">
interface Props {type?: 'default' | 'primary' | 'success' | 'warning' | 'danger'size?: 'small' | 'medium' | 'large'title?: stringsubtitle?: stringshadow?: booleanbordered?: boolean
}withDefaults(defineProps<Props>(), {type: 'default',size: 'medium',shadow: true,bordered: false
})
</script><template><viewclass="base-card":class="[`card--${type}`,`card--${size}`,{ 'card--shadow': shadow },{ 'card--bordered': bordered },]"><view v-if="$slots.header || title" class="card-header"><slot name="header"><text class="card-title">{{ title }}</text><text v-if="subtitle" class="card-subtitle">{{ subtitle }}</text></slot></view><view class="card-content"><slot /></view><view v-if="$slots.footer" class="card-footer"><slot name="footer" /></view></view>
</template><style scoped>
.base-card {@apply bg-white rounded-lg overflow-hidden;
}
.card--shadow {@apply shadow-sm;
}
.card--bordered {@apply border border-gray-200;
}
</style>
复杂组件开发(人工主导)

需要人工开发的组件特征:

  • 涉及全局状态管理
  • 复杂的交互逻辑
  • 性能敏感的组件

阶段二:UI 还原

通过 Figma MCP 插件,Trae 可以直接读取设计稿并生成对应的的小程序代码,操作步骤如下:

  1. 获取设计链接

    • 右键点击 Figma 中的 Frame 或图层
    • 选择 Copy/Paste AsCopy Link to Selection
    • 或使用快捷键 ⌘ + L (macOS) / Ctrl + L (Windows)
  2. 在 Trae 中使用
    打开trae的对话框,选择Builder with MCP,粘贴 Figma 链接,然后输入提示词即可。

  3. 产出效果
    由于项目UI不方便展示,这里贴一个 Trae 生成的叮咚决策器的效果,还原度还是比较高的。

阶段三:API 工程化

Alova + @alova/wormhole 集成

基于项目的 Swagger 文档,实现 API 的自动化集成:

// alova.config.ts
export default {generator: [{input: 'http://your-api-domain/v2/api-docs',platform: 'swagger',output: 'src/api',responseMediaType: 'application/json',bodyMediaType: 'application/json',version: 3,type: 'typescript',global: 'Apis',handleApi: (apiDescriptor) => {// 过滤废弃的 APIif (apiDescriptor.deprecated) {return undefined}return apiDescriptor}}],autoUpdate: {launchEditor: true,interval: 5 * 60 * 1000 // 每5分钟检查更新}
}
自动生成的 API 使用
import { usePagination, useRequest } from 'alova'
import { Apis } from '@/api'// 单次请求 - 自动类型推导
const { data: userInfo, loading: userLoading } = useRequest(Apis.user.getUserInfo()
)// 分页请求 - 支持参数类型检查
const {data: orderList,loading: listLoading,loadNext,refresh
} = usePagination((page, size) => Apis.order.getOrderList({params: {page,size,status: 'pending' // TypeScript 自动检查状态值}}),{initialData: [],initialPageSize: 20}
)

阶段四:业务开发(智能组合)

基于前面的基础设施,Trae 能够智能地组合组件和 API:

<script setup lang="ts">
import { usePagination } from 'alova'
import { Apis } from '@/api'const searchText = ref('')
const activeTab = ref('all')// 使用 Alova 进行分页请求
const {data: orderList,loading,loadNext
} = usePagination((page, size) => Apis.getOrderList({page,size,status: activeTab.value,keyword: searchText.value}),{initialData: [],initialPageSize: 20}
)
</script><template><view class="order-list-page"><!-- Trae 优先推荐项目组件 --><NavSearchBarv-model="searchText"placeholder="搜索订单号"@search="handleSearch"/><!-- 自动推荐合适的组件库组件 --><wd-tabs v-model="activeTab"><wd-tab title="全部" name="all" /><wd-tab title="待付款" name="pending" /><wd-tab title="已完成" name="completed" /></wd-tabs><!-- 智能组合业务组件 --><view class="order-list"><template v-if="!loading"><viewv-for="order in orderList":key="order.id"class="order-item"@click="navigateToDetail(order.id)"><!-- 订单内容 --></view></template><SalesListSkeleton v-else /></view><!-- 空状态处理 --><EmptyStatus v-if="!loading && !orderList.length" /></view>
</template>

阶段五:测试与文档(AI 辅助总结)

Trae 能够分析代码并生成功能总结和测试建议:

/*** 订单管理模块功能总结 (AI 辅助生成)** 核心功能:* 1. 订单列表查询和筛选* 2. 订单详情查看* 3. 订单状态变更* 4. 订单统计分析** 主要组件:* - OrderList.vue: 订单列表页面* - OrderDetail.vue: 订单详情页面* - OrderStats.vue: 订单统计组件*/

实际开发效果

引入 AI 进行工程化开发后,开发体验得到明显改善,可以体现在以下阶段:

开发阶段传统方式体验AI 辅助体验主要改善
项目初始化大量重复性基础设施搭建简单组件和工具函数快速生成基础设施搭建更高效
UI 还原手工对照设计稿编写样式基于设计稿智能生成设计还原速度显著加快
API 集成手工编写类型定义和调用代码自动生成类型安全的代码API 开发效率大幅提升
业务开发需要记忆和查找组件 API智能提示和组件推荐开发流畅度明显改善
测试总结手工编写测试用例和文档AI 辅助生成测试点文档生成更便利

最佳实践建议

项目启动前(上游依赖质量检查):

  • 评估设计稿质量:确保设计系统完整、命名规范、状态齐全
  • 检查 PRD 完整性:业务流程清晰、异常处理明确、数据结构完整
  • 验证 API 文档:Swagger 文档完整、示例详细、错误码齐全
  • 确认组件库文档:API 文档完整、支持 llms.txt、类型定义完整
  • 配置 Trae Rules:根据项目实际,建立项目开发规范

开发过程中:

  • 优先开发基础组件和工具函数
  • 及时更新 Trae Rules 中的组件库
  • 保持 API 文档的同步更新

代码审查时:

  • 重点关注 AI 生成代码的业务逻辑正确性
  • 验证类型安全和错误处理
  • 确保代码符合项目规范

小小总结一下

在实际的项目中,我们验证了 Trae 在 uni-app 项目开发跨端小程序的应用价值,通过合理应用 AI 辅助开发,我们相信可以显著提升开发效率和代码质量,让开发者能够将更多精力投入到产品创新和用户体验优化上,同时期待 Trae 等 AI 编程工具能够提供更好的氛围编程体验。

感谢阅读!欢迎评论区沟通讨论👇。希望这份实践指南能为您的团队在 AI 辅助开发道路上提供有价值的参考。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.pswp.cn/diannao/95932.shtml
繁体地址,请注明出处:http://hk.pswp.cn/diannao/95932.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Vue3 + Element Plus 人员列表搜索功能实现

设计思路使用Element Plus的el-table组件展示人员数据 在姓名表头添加搜索图标按钮 点击按钮弹出搜索对话框 在对话框中输入姓名进行搜索 实现搜索功能并高亮匹配项下面是完整的实现代码&#xff1a;<!DOCTYPE html> <html lang"zh-CN"> <head><…

告别手动优化!React Compiler 自动记忆化技术深度解析

概述 React Compiler 是 React 团队开发的一个全新编译器&#xff0c;目前处于 RC&#xff08;Release Candidate&#xff09;阶段。这是一个仅在构建时使用的工具&#xff0c;可以自动优化 React 应用程序&#xff0c;无需重写任何代码即可使用。 核心特性 自动记忆化优化 …

【从零开始学习Redis】项目实战-黑马点评D2

商户查询缓存 为什么用缓存&#xff1f;作用模型缓存流程按照流程编写代码如下 Service public class ShopServiceImpl extends ServiceImpl<ShopMapper, Shop> implements IShopService {Resourceprivate StringRedisTemplate stringRedisTemplate;Overridepublic Resul…

后端Web实战-MySQL数据库

目录 1.MySQL概述 1.1 安装 1.1.1 版本 1.1.2 安装 1.1.3 连接 1.2 数据模型 1.3 SQL简介 1.3.1 分类 1.3.2 SQL通用语法 2.DDL 2.1 数据库操作 2.2 图形化工具 2.2.1 使用 2.3 表操作 2.3.1 创建表 2.3.1.1约束 2.3.1.2 数据类型 2.3.1.3 案例 2.3.2 DDL&am…

开源数据发现平台:Amundsen 本地环境安装

Amundsen 是一个数据发现和元数据引擎&#xff0c;旨在提高数据分析师、数据科学家和工程师与数据交互时的生产力。目前&#xff0c;它通过索引数据资源&#xff08;表格、仪表板、数据流等&#xff09;并基于使用模式&#xff08;例如&#xff0c;查询频率高的表格会优先于查询…

ubuntu18.04部署cephfs

比起君子讷于言而敏于行&#xff0c;我更喜欢君子善于言且敏于行。 目录 一. 准备工作&#xff08;所有节点&#xff09; 1. /etc/hosts 2. 安装python2 3. 配置普户免密sudo 4. 准备好四块盘&#xff0c;一块hddsdd为一组&#xff0c;一台设备上有一组 5. 添加源 二. 安…

VMD+皮尔逊+降噪+重构(送报告+PPT)Matlab程序

1.程序介绍:以含白噪声信号为例&#xff1a;1.对信号进行VMD分解2.通过皮尔逊进行相关性计算3.通过设定阈值将噪声分量和非噪声分量分别提取出4.对非噪声信号进行重构达到降噪效果包含评价指标&#xff1a;% SNR&#xff1a;信噪比% MSE&#xff1a;均方误差% NCC&#xff1a;波…

UE5多人MOBA+GAS 45、制作冲刺技能

文章目录添加技能需要的东西添加本地播放GC添加冲刺tag添加一个新的TA用于检测敌方单位添加冲刺GA到角色中监听加速移动速度的回调创建蒙太奇添加GE添加到数据表中添加到角色中纠错添加技能需要的东西 添加本地播放GC 在UCAbilitySystemStatics中添加 /*** 在本地触发指定的游…

分库分表和sql的进阶用法总结

说下你对分库分表的理解分库分表是⼀种常⽤的数据库⽔平扩展&#xff08;Scale Out&#xff09;技术&#xff0c;⽤于解决单⼀数据库性能瓶颈和存储容量限制的问题。在分库分表中&#xff0c;数据库会根据某种规则将数据分散存储在多个数据库实例和表中&#xff0c;从⽽提⾼数据…

紫金桥RealSCADA:国产工业大脑,智造安全基石

在工业4.0时代&#xff0c;数字化转型已成为企业提升竞争力的核心路径。作为工业信息化的基石&#xff0c;监控组态软件在智能制造、物联网、大数据等领域发挥着关键作用。紫金桥软件积极响应国家“两化融合”战略&#xff0c;依托多年技术积淀与行业经验&#xff0c;重磅推出跨…

朗空量子与 Anolis OS 完成适配,龙蜥获得抗量子安全能力

近日&#xff0c;苏州朗空后量子科技有限公司&#xff08;以下简称“朗空量子”&#xff09;签署了 CLA&#xff08;Contributor License Agreement&#xff0c;贡献者许可协议&#xff09;&#xff0c;加入龙蜥社区&#xff08;OpenAnolis&#xff09;。 朗空量子是一家后量子…

C#WPF实战出真汁08--【消费开单】--餐桌面板展示

1、功能介绍在这节里&#xff0c;需要实现餐桌类型展示&#xff0c;类型点击切换事件&#xff0c;餐桌面板展示功能&#xff0c;细节很多&#xff0c;流程是UI设计布局-》后台业务逻辑-》视图模型绑定-》运行测试2、UI设计布局TabControl&#xff0c;StackPanel&#xff0c;Gri…

2025年机械制造、机器人与计算机工程国际会议(MMRCE 2025)

&#x1f916;&#x1f3ed;&#x1f4bb; 探索未来&#xff1a;机械制造、机器人与计算机工程的交汇点——2025年机械制造、机器人与计算机工程国际会议&#x1f31f;MMRCE 2025将汇聚全球顶尖专家、学者及行业领袖&#xff0c;聚焦机械制造、机器人和计算机工程领域的前沿议题…

Vue Router 嵌套路由与布局系统详解:从新手到精通

在Vue单页应用开发中&#xff0c;理解Vue Router的嵌套路由机制是构建现代管理后台的关键。本文将通过实际案例&#xff0c;深入浅出地解释Vue Router如何实现布局与内容的分离&#xff0c;以及<router-view>的嵌套渲染原理。什么是嵌套路由&#xff1f;嵌套路由是Vue Ro…

Grafana 与 InfluxDB 可视化深度集成(二)

四、案例实操&#xff1a;以服务器性能监控为例 4.1 模拟数据生成 为了更直观地展示 Grafana 与 InfluxDB 的集成效果&#xff0c;我们通过 Python 脚本模拟生成服务器性能相关的时间序列数据。以下是一个简单的 Python 脚本示例&#xff0c;用于生成 CPU 使用率和内存使用量…

.net印刷线路板进销存PCB材料ERP财务软件库存贸易生产企业管理系统

# 印刷线路板进销存PCB材料ERP财务软件库存贸易生产企业管理系统 # 开发背景 本软件原为给苏州某企业开发的pcb ERP管理软件&#xff0c;后来在2021年深圳某pcb 板材公司买了我们的软件然后在此基础上按他行业的需求多次修改后的软件&#xff0c;适合pcb板材行业使用。 # 功能…

基于飞算JavaAI的可视化数据分析集成系统项目实践:从需求到落地的全流程解析

引言&#xff1a;为什么需要“可视化AI”的数据分析系统&#xff1f; 在数字化转型浪潮中&#xff0c;企业/团队每天产生海量数据&#xff08;如用户行为日志、销售记录、设备传感器数据等&#xff09;&#xff0c;但传统数据分析存在三大痛点&#xff1a; 技术门槛高&#xff…

MqSQL中的《快照读》和《当前读》

目录 1、MySQL读取定义 1.1、锁的分类 1.2、快照读与当前读 1.3、使用场景 1.4、区别 2、实现机制 2.1、实现原理 2.2、隔离级别和快照联系 1、隔离级别 2、快照读 2.3、快照何时生成 3、SQL场景实现 3.1、快照读 3.2、当前读 4、锁的细节&#xff08;与当前读相…

【Docker项目实战】使用Docker部署Notepad轻量级记事本

【Docker项目实战】使用Docker部署Notepad轻量级记事本一、 Notepad介绍1.1 Notepad简介1.2 Notepad特点1.3 主要使用场景二、本次实践规划2.1 本地环境规划2.2 本次实践介绍三、本地环境检查3.1 检查Docker服务状态3.2 检查Docker版本3.3 检查docker compose 版本四、下载Note…

开疆智能ModbusTCP转Ethernet网关连接FBOX串口服务器配置案例

本案例是串口服务器通过串口采集第三方设备数据转成ModbusTCP的服务器后欧姆龙PLC通过Ethernet连接到网关&#xff0c;读取采集到的数据。具体配置过程如下。配置过程&#xff1a;Fbox做从站FBox采集PLC数据&#xff0c;通过Modbus TCP Server/Modbus RTU Server协议配置地址映…