移行ガイド
他の UI ライブラリから lh-ui-plus への移行の手順と注意事項です。
Element Plus からの移行
主な違い
| 特性 | Element Plus | lh-ui-plus |
|---|---|---|
| プレフィックス | el- | lh- |
| テーマ | SCSS 変数 | CSS 変数（88+ トークン） |
| ダークモード | 内蔵（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 |
共通の移行のアドバイス
- 先にテストを走らせる — 移行前にプロジェクトが正常にビルドできることを確認する
- コンポーネントを 1 つずつ置き換える — 一度にすべてを置き換えない
- テーマの違いを確認する — CSS 変数と SCSS 変数の対応関係
- API ドキュメントを確認する — props/events の互換性を確認する