# Inicio rápido

# Importación completa

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

Vue.use(LhUIVue2)

# Importación bajo demanda (recomendada, favorable para tree-shaking)

import Vue from 'vue'
import { LhButton, LhInput } from '@lh-ui/vue2'
import '@lh-ui/vue2/theme.css'
// Importación individual de los estilos de cada componente (sin coste de efectos secundarios; véase la nota inicial de la documentación de cada componente)
import '@lh-ui/vue2/style/button'
import '@lh-ui/vue2/style/input'

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

# Configuración global (opcional)

Envuelve la raíz de la aplicación con LhConfigProvider para configurar de forma uniforme el tamaño, el idioma y las variables del tema:

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

# v-model y .sync

Semántica de Vue2 y convenciones de la biblioteca:

  • Enlace bidireccional de controles de formulario: <LhInput v-model="text" /> (internamente model: { prop: 'modelValue', event: 'input' })
  • Visibilidad del diálogo: <LhDialog :visible.sync="show" /> (.sync es la convención del evento update:xxx; Dialog también admite v-model)

# API imperativa

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

Advertencia

Las precauciones del entorno Vue 2.7 y las restricciones completas (reactividad de las propiedades dinámicas, solución de capas emergentes sin Teleport, etc.) se encuentran en el AGENTS.md del repositorio.

Copyright © 2024-2026 FengMo WenXue