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

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

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

在这个项目中，我们使用Trae作为主要AI编程工具，集成Figma、Alova 网络请求框架、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 As → Copy 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 辅助开发道路上提供有价值的参考。