クイックスタート

Vue 3 プロジェクトを作成する

# pnpm で Vite プロジェクトを作成
pnpm create vite my-app --template vue-ts
cd my-app

@lh-ui/vue3 をインストールする

pnpm add @lh-ui/vue3

完全なインポート（main.ts）

import { createApp } from 'vue'
import App from './App.vue'
import LhUiPlus from '@lh-ui/vue3'
import '@lh-ui/vue3/dist/index.css'

const app = createApp(App)
app.use(LhUiPlus)
app.mount('#app')

コンポーネントを使う

<script setup lang="ts">
</script>

<template>
  <div>
    <LhButton type="primary">メインボタン</LhButton>
    <LhButton type="success">成功ボタン</LhButton>
    <LhButton type="warning">警告ボタン</LhButton>
    <LhButton type="danger">危険ボタン</LhButton>
    <LhButton type="info">情報ボタン</LhButton>
  </div>
</template>

グローバル設定とテーマ

LhConfigProvider はグローバル設定（言語、サイズ）とテーマ変数（themeVars）を提供し、それぞれ独立した prop として渡します：

<script setup lang="ts">
import { zhCN } from '@lh-ui/vue3'
</script>

<template>
  <LhConfigProvider
    :locale="zhCN"
    size="medium"
    :theme-vars="{ 'primary-color': '#5B8C5A' }"
  >
    <LhButton type="primary">中華風ボタン</LhButton>
  </LhConfigProvider>
</template>

• locale：言語パック。パッケージのルートパスから名前付きインポートする（zhCN / enUS）。
• size：グローバルサイズ。small / medium / large / mini から選択できる。
• themeVars：テーマ変数。キー名から --lh- プレフィックスを省略できる。プリセットテーマは useLhPresetTheme で一键切换できる。詳細はプリセットテーマを参照。

オンライン示例

以下は lh-ui-plus の基本的な使用効果を示しています：