빠른 시작

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 { koKR } from '@lh-ui/share/locales/lang/ko-KR'
</script>

<template>
  <LhConfigProvider
    :locale="koKR"
    size="medium"
    :theme-vars="{ 'primary-color': '#5B8C5A' }"
  >
    <LhButton type="primary">국풍 버튼</LhButton>
  </LhConfigProvider>
</template>

• locale: 언어 패, 패키지 루트 경로에서 명명된 가져오기로 사용 (zhCN / enUS), 또는 @lh-ui/share/locales/lang/* 서브패스.
• size: 전역 크기, small / medium / large / mini 중 선택.
• themeVars: 테마 변수, 키 이름에서 --lh- 접두사를 생략할 수 있습니다. 프리셋 테마는 useLhPresetTheme로 한 번에 전환할 수 있으며, 자세한 내용은 사전 정의된 테마를 참고하세요.

온라인 예시

다음은 lh-ui-plus의 기본 사용 효과를 보여줍니다: