遷移指南
從其他 UI 庫遷移到 lh-ui-plus 的步驟與注意事項。
從 Element Plus 遷移
主要差異
| 特性 | Element Plus | lh-ui-plus |
|---|---|---|
| 前綴 | el- | lh- |
| 主題 | SCSS 變數 | CSS 變數 (88+ token) |
| 暗色模式 | 內建(html.dark 類別切換) | 完整支援(data-theme + useLhTheme) |
| 花紋背景 | 無 | 6 種預設 |
元件對應
| Element Plus | lh-ui-plus |
|---|---|
ElButton | LhButton |
ElInput | LhInput |
ElForm | LhForm |
ElSelect | LhSelect |
ElDialog | LhDialog |
遷移步驟
- 替換 import 路徑
- 替換元件標籤前綴
- 檢查 themeVars 設定
- 執行
pnpm lint和pnpm typecheck
從 Ant Design Vue 遷移
Ant Design 以 ant- 前綴,lh-ui-plus 以 lh- 前綴。
| Ant Design Vue | lh-ui-plus |
|---|---|
a-button | LhButton |
a-input | LhInput |
a-form | LhForm |
通用遷移建議
- 先執行測試 — 確保遷移前專案可正常建構
- 逐個元件替換 — 不要一次性全部替換
- 檢查主題差異 — CSS 變數與 SCSS 變數的對應
- 檢視 API 文件 — 確認 props/events 相容性