安裝

環境要求

Node.js >= 18
pnpm >= 8

安裝

bash

# 使用 pnpm
pnpm add @lh-ui/vue3

# 使用 npm
npm install @lh-ui/vue3

# 使用 yarn
yarn add @lh-ui/vue3

引入元件

完整引入

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')

按需引入

從套件根路徑具名匯入元件，並單獨引入對應元件的樣式（樣式子路徑為 @lh-ui/vue3/style/<元件名>）：

vue

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

<template>
  <LhButton type="primary">国风按钮</LhButton>
</template>

尚未提供 unplugin-vue-components 的 Resolver，自動按需引入可按上方寫法手動匯入元件與樣式。

按需引入有兩條樣式路徑可選：

子路徑	說明
`@lh-ui/vue3/style/<元件名>`	指向 SCSS 原始碼檔案，可在消費側覆寫設計變數做深度定製，但要求專案安裝了 `sass`
`@lh-ui/vue3/style-css/<元件名>`	指向構建時預編譯的 CSS，開箱即用，無需 `sass`

// 專案有 sass，需要深度定製主題
import '@lh-ui/vue3/style/button'

// 專案沒有 sass，或不需要定製
import '@lh-ui/vue3/style-css/button'

CDN 引入

套件的 UMD 產物已發佈到公共 CDN，適合演示頁面或不想走打包鏈的情境：

html

<!-- 元件（全域暴露 window.lhUiPlus） -->
<script src="https://unpkg.com/@lh-ui/vue3"></script>
<!-- 或 jsdelivr -->
<script src="https://cdn.jsdelivr.net/npm/@lh-ui/vue3"></script>
<!-- 全量樣式 -->
<link rel="stylesheet" href="https://unpkg.com/@lh-ui/vue3/dist/index.css" />

const app = Vue.createApp({ /* ... */ })
app.use(lhUiPlus)
app.mount('#app')

鎖定版本時在套件名稱後加 @<version>，例如 https://unpkg.com/@lh-ui/vue3@1.0.0。生產環境建議鎖定版本，避免新版本發佈時 CDN 產物意外升級。

私有伺服器安裝

如果你在內網、npm 存取受限，或想把版本鎖定在自己託管的鏡像上，可以從作者私有伺服器直接安裝 tarball（託管細節見發佈指南）：

bash

# pnpm
pnpm add https://www.lhgb.top/lhui/vue3/packages/1.0.0/lh-ui-vue3-1.0.0.tgz

# npm
npm install https://www.lhgb.top/lhui/vue3/packages/1.0.0/lh-ui-vue3-1.0.0.tgz

# yarn
yarn add https://www.lhgb.top/lhui/vue3/packages/1.0.0/lh-ui-vue3-1.0.0.tgz

或寫入 package.json：

json

{
  "dependencies": {
    "@lh-ui/vue3": "https://www.lhgb.top/lhui/vue3/packages/1.0.0/lh-ui-vue3-1.0.0.tgz"
  }
}

tarball 安裝會繞過 registry 的版本解析，升級時需手動替換 URL；本套件零執行時依賴，僅需專案內已安裝 Vue 3。
如果你希望像安裝普通套件一樣 pnpm add @lhgb/vue3 並走版本解析，可以用私有 registry 中繼資料方式安裝。

安裝 ​

環境要求 ​

安裝 ​

引入元件 ​

完整引入 ​

按需引入 ​

CDN 引入 ​

私有伺服器安裝 ​

安裝