效率提升 45%！TRAE 辅助下的 uni-app 跨端小程序工程化开发实践

本文作者：不如摸鱼去，TRAE 开发者用户

本文分享使用 TRAE 作为主要 AI 编程工具，开发 uni-app 跨平台小程序的完整实践经验。通过深入探索 AI 辅助开发的具体应用场景，我们整理出一套完整的开发流程和工具链集成方案。

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

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

为什么选择 AI 辅助开发？

传统开发遇到的痛点

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

• 设计稿还原耗时： UI 设计到代码实现需要大量手工转换

• API 集成重复工作： 接口类型定义、Mock 数据生成等机械性任务

• 测试用例编写： 测试场景梳理和用例编写非常耗时

我们的解决思路

核心理念：

让 AI 处理重复性工作，人专注于业务逻辑

具体策略

• 利用 Figma MCP 实现设计稿到代码的半自动化转换

• 基于 Swagger 文档自动生成 API 类型和调用代码

• 通过 TRAE + llms.txt 文档集成让 AI 理解项目组件库和开发规范

• 建立完整的 AI 辅助开发工作流

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

实践中发现，以下上游依赖的完整性和规范性直接影响 AI 辅助开发效果：

• 设计稿完整性

• 需求文档完整性

• API 文档完整性

• 组件库对 AI 支持的完整性

技术选型与工具链

开发工具选择

• TRAE 国际版： 核心开发环境，提供 AI 代码生成和智能提示

• Figma MCP： 设计稿到代码的转换工具

• @alova/wormhole： API 工程化和编辑器集成

技术栈选择

选用维护的 uni-app vue3 模板 wot-demo 作为基础项目： github.com/wot-ui/wot-...

核心技术栈：

• 核心框架： @uni-helper

• 开发引擎： uni-app

• 构建工具： Vite

• 样式方案： UnoCSS

• 代码质量： ESLint + TypeScript

• UI 组件库： Wot UI

• CI/CD: uni-mini-ci

• 路由管理： uni-mini-router

• 网络请求： Alova

• 状态管理： Pinia

配置指南

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

1. 配置 figma MCP

figma mcp 有多种配置方式。这里我们直接使用 figma 官方提供的 Figma Dev Mode MCP。

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

前置要求

• 计划要求： Professional、Organization 或 Enterprise 计划

• 席位要求： Dev 或 Full 席位

• 应用要求： 必须使用 Figma beta 版桌面应用：www.figma.com/downloads/

步骤 1：启用 Figma 桌面应用的 MCP 服务

• 更新应用： 确保 Figma 桌面应用为最新 beta 版本
• 打开设计文件： 创建或打开一个 Figma Design 文件
• 访问菜单： 点击左上角的 Figma 菜单
• 启用服务：在 Preferences 下选择 Enable Dev Mode MCP Server
• 确认运行： 底部应显示确认消息，表明服务器已启用并运行

📍 重要：服务器将在本地运行于 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 功能管理界面，我们定位到上下文页签，选择添加文档集

填入 wot-design-uni.cn/llms-full.t... 即可

​

开发流程

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

阶段一：项目初始化

原则：架构设计靠人工，标准实现靠 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?: string
  subtitle?: string
  shadow?: boolean
  bordered?: boolean
}

withDefaults(defineProps<Props>(), {
  type: 'default',
  size: 'medium',
  shadow: true,
  bordered: false
})
</script>

<template>
  <view
    class="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 可以直接读取设计稿并生成对应的小程序代码。

3.1 获取设计链接：

• 右键点击 Figma 中的 Frame 或图层

• 选择 Copy/Paste As → Copy Link to Selection

• 或使用快捷键 ⌘ + L （macOS） / Ctrl + L （Windows）

3.2 在 TRAE 中使用：

打开 TRAE 的对话框，选择 Builder with MCP，粘贴 Figma 链接，然后输入提示词即可。

3.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) => {
    // 过滤废弃的 API
    if (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 优先推荐项目组件 -->
    <NavSearchBar
      v-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">
        <view
          v-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 编程工具能够提供更好的氛围编程体验。