빠른 시작

전체 불러오기

import Vue from 'vue'
import LhUIVue2 from '@lh-ui/vue2'
import '@lh-ui/vue2/theme.css'

Vue.use(LhUIVue2)

개별 불러오기 (권장, tree-shaking 에 유리)

import Vue from 'vue'
import { LhButton, LhInput } from '@lh-ui/vue2'
import '@lh-ui/vue2/theme.css'
// 컴포넌트별 스타일을 개별적으로 불러오기 (부작용 부담 없음, 각 컴포넌트 문서 상단의 설명 참조)
import '@lh-ui/vue2/style/button'
import '@lh-ui/vue2/style/input'

Vue.use(LhButton)
Vue.use(LhInput)

전역 설정 (선택)

LhConfigProvider 로 애플리케이션 루트를 감싸 크기, 언어와 테마 변수를 통일되게 설정합니다.

<template>
  <LhConfigProvider size="medium" locale="zh-CN" :theme-vars="{ 'primary-color': '#2B4C7C' }">
    <router-view />
  </LhConfigProvider>
</template>

v-model 과 .sync

Vue2 의미와 이 라이브러리의 약속:

• 폼 컨트롤의 양방향 바인딩: <LhInput v-model="text" />(내부적으로 model: { prop: 'modelValue', event: 'input' })
• 대화상자 표시/숨김: <LhDialog :visible.sync="show" />(.sync는 곧update:xxx이벤트 약속이며, Dialog 는v-model` 도 지원)

명령형 API

import { t, setLocale } from '@lh-ui/vue2'
setLocale('en-US')
t('input.placeholder') // 'Please input'

경고

Vue 2.7 환경에서의 주의 사항과 완전한 제약 (동적 속성 반응성, Teleport 가 없는 플로팅 레이어 방안 등)은 저장소 AGENTS.md 를 참조하세요.