UI 轉 Vue 是做什麼的？
批次將 UI 設計截圖轉換為 Vue 3 Composition API 元件程式碼。
使用時機
- 使用者提供一個目錄，內含設計截圖或設計匯出圖片。
- 目標應用程式為 Vue 3。
- 使用者希望獲得頁面元件、共用元件及路由連線的初版。
- 使用者指定 Vant、Element Plus 或 Ant Design Vue 作為元件庫。
不應使用時機
- 使用者只有一張截圖，且希望獲得專屬元件。
- 目標專案不是 Vue。
- 設計需要詳細的互動邏輯、資料流或無障礙性審查。
- 截圖包含無法傳送至外部模型 API 的私人客戶資料。
輸入
使用一個輸入目錄，將截圖按模組和頁面狀態分組：
screenshots/
|-- HomePage/
| |-- List/
| | |-- [email protected]
| | `-- cut-images/
| |-- cut-images/
| `-- [email protected]
`-- cut-images/
支援的切圖目錄名稱包含 assets、icons、sprites、cut、images 和 cut-images。
轉換模型
- 頁面分組：將相關截圖合併成一個頁面元件，當它們代表列表、詳細、表單、載入或空狀態時。
- UI 函式庫對應：盡可能將原生視覺元素對應到 Vant、Element Plus 或 Ant Design Vue 元件。
- 切圖優先順序：優先使用頁面層級資源，其次是模組層級，最後是全域共用資源。
- 元件提取：當 UI 區域重複出現超過一次時，將其提取為共用元件。
CLI 使用方式
使用 npx 執行轉換器，確保記錄中的指令不需依賴全域二進位檔即可運作：
export DASHSCOPE_API_KEY=your_key
npx [email protected] --input ./screenshots --ui vant --output ./src
針對桌面 UI 函式庫：
npx [email protected] --input ./designs --ui element-plus --output ./src
npx [email protected] --input ./designs --ui antd-vue --output ./src
如果套件已全域安裝，可以直接使用 ui-to-vue 指令：
npm install -g [email protected]
ui-to-vue --input ./screenshots --ui vant --output ./src
選項
| 選項 | 描述 | 預設值 |
|---|---|---|
--input | 設計圖片目錄 | ./screenshots |
--ui | UI 函式庫：vant、element-plus 或 antd-vue | vant |
--output | 輸出目錄 | ./src |
--config | 設定檔路徑 | ./.ui-to-vue.config.json |
API 金鑰處理
轉換器可以從設定檔或環境變數中讀取 DashScope 憑證。在儲存庫中偏好使用環境變數：
export DASHSCOPE_API_KEY=your_key
如果需要本機設定檔，請將其排除在版本控制之外：
{
"apiKey": "your_dashscope_key",
"input": "./designs",
"ui": "vant",
"output": "./src"
}
.ui-to-vue.config.json
安全性與隱私
- 將設計截視為可能傳送至外部模型 API 的來源素材。
- 未經許可，請勿對私人客戶設計執行此流程。
- 在可重複的工作流程中固定轉換器版本，而非使用
@latest。 - 提交前請審查產生的 Vue 程式碼。
- 請勿提交
.ui-to-vue.config.json、API 金鑰、產生的機密資訊或客戶截圖。
輸出審查清單
- 頁面元件已產生在
views/或指定的輸出目錄下。 - 僅在重複使用明確時，才將重複的 UI 區域提取到
components/中。 - 路由輸出與目標專案的路由風格相容。
- 產生的元件一致使用要求的 UI 函式庫。
- 產生的 CSS 單位符合設計基準。
- 程式碼通過專案的格式化工具、linter、型別檢查器及建置程序。
- 提交前已審查過佔位文字、模擬資料及產生的資源。
疑難排解
| 問題 | 檢查項目 |
|---|---|
401 或驗證錯誤 | 確認在執行指令的 shell 中已設定 DASHSCOPE_API_KEY。 |
command not found: ui-to-vue | 使用 npx [email protected] 形式，或全域安裝套件。 |
| 切圖被忽略 | 確認資源目錄名稱受支援，且位於對應的頁面或模組之下。 |
| 元件忽略要求的 UI 函式庫 | 使用明確的 --ui 值重新執行，並檢查產生的匯入內容。 |
| 產生的版面尺寸看起來不對 | 確認截圖匯出寬度符合目標函式庫的基準。 |
參考資料
- npm 套件：
ui-to-vue-converter