大家好,我是不如摸魚去,歡迎來到我的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 來接管:
- 設計稿還原耗時:UI 設計到代碼實現需要大量手工轉換
- API 集成重復工作:接口類型定義、Mock 數據生成等重復性工作
- 測試用例的編寫:測試用例編寫非常耗時
我們的解決思路
核心理念:讓 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 服務
- 更新應用:確保 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功能管理界面,我們定位到上下文頁簽,選擇添加文檔集
填入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 可以直接讀取設計稿并生成對應的的小程序代碼,操作步驟如下:
-
獲取設計鏈接:
- 右鍵點擊 Figma 中的 Frame 或圖層
- 選擇 Copy/Paste As → Copy Link to Selection
- 或使用快捷鍵
? + L
(macOS) /Ctrl + L
(Windows)
-
在 Trae 中使用:
打開trae的對話框,選擇Builder with MCP,粘貼 Figma 鏈接,然后輸入提示詞即可。
-
產出效果
由于項目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 輔助開發道路上提供有價值的參考。