コンポーネントライブラリ比較
lh-ui-plus とその他の主要な Vue UI ライブラリの比較分析です。
主要な比較
| 特性 | lh-ui-plus | Element Plus | Ant Design Vue | Naive UI |
|---|---|---|---|---|
| スタイル記法 | CSS 変数 | SCSS 変数 | CSS 変数（Less トークン） | CSS 変数 |
| ダークモード | ✅ | ✅ | ✅（テーマトークン） | ✅ |
| 紀様背景 | ✅ 6 種類 | ❌ | ❌ | ❌ |
| クロスフレームワーク | ✅ 純関数ロジック | ❌ | ❌ | ❌ |
| 国際化 | ✅ zh/en 完全、その他の言語パックはプレースホルダー | ✅ | ✅ | ✅ |
| sx レイアウト | ✅ | ❌ | ❌ | ❌ |
| PassThrough | ❌ | ❌ | ❌ | ❌（テーマ上書き） |
| BEM 命名 | lh- | el- | ant- | n- |
独自の強み
- 中華風デザイン体系 — 中国の伝統的な顔料に基づく配色方案
- CSS 変数テーマ（88+ トークン） — SCSS よりも柔軟に更新できる
- クロスフレームワーク — 純関数ロジックで、将来的に React にも適応可能
- 紋様背景システム — 伝統的な SVG 紋様の背景
- sx クイックレイアウト — Tailwind のような原子化されたインラインスタイル
選択の指針
- 中華風デザイン / 紋様背景が必要 → lh-ui-plus
- ダークモードが必要 → 4 つのどれでも可
- クロスフレームワークサポートが必要 → lh-ui-plus（コンポーネントのロジックがフレームワークから分離されている）
- 完全なエコシステムとエンタープライズ級のフォームが必要 → Element Plus / Ant Design Vue
- テーマの深い上書きが必要 → Naive UI（theme overrides）