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 單位與設計基準相符。
- 程式碼通過專案的格式化工具、程式碼檢查工具、型別檢查工具及建置。
- 提交前已審查過佔位文字、模擬資料及產生的素材。
疑難排解
| 問題 | 檢查方式 |
|---|---|
401 或驗證錯誤 | 確認在執行命令的 Shell 中已設定 DASHSCOPE_API_KEY。 |
command not found: ui-to-vue | 使用 npx [email protected] 形式，或全域安裝套件。 |
| 切圖被忽略 | 確認素材目錄名稱受支援，且位於對應頁面或模組的下層。 |
| 元件忽略指定的 UI 庫 | 使用明確的 --ui 值重新執行，並檢查產生的 import 語句。 |
| 產生的版面尺寸錯誤 | 確認截圖匯出寬度與目標 UI 庫的基準相符。 |
參考資訊
- npm 套件：
ui-to-vue-converter