快速開始

建立一個 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 的基本使用效果：