Inicio rápido

Crear un proyecto Vue 3

# Crear un proyecto Vite con pnpm
pnpm create vite my-app --template vue-ts
cd my-app

Instalar @lh-ui/vue3

pnpm add @lh-ui/vue3

Importación completa (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')

Usar los componentes

<script setup lang="ts">
</script>

<template>
  <div>
    <LhButton type="primary">Botón principal</LhButton>
    <LhButton type="success">Botón de éxito</LhButton>
    <LhButton type="warning">Botón de advertencia</LhButton>
    <LhButton type="danger">Botón de peligro</LhButton>
    <LhButton type="info">Botón de información</LhButton>
  </div>
</template>

Configuración global y tema

LhConfigProvider ofrece la configuración global (idioma, tamaño) y las variables de tema (themeVars), cada una a través de su propia 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">Botón de estilo chino</LhButton>
  </LhConfigProvider>
</template>

• locale: paquete de idioma, importado por nombre desde la ruta raíz del paquete (zhCN / enUS).
• size: tamaño global, las opciones son small / medium / large / mini.
• themeVars: variables de tema; los nombres de las claves pueden omitir el prefijo --lh-. Los presets de tema se pueden cambiar con un solo comando usando useLhPresetTheme; consulta Temas predefinidos.

Ejemplo en línea

La siguiente demostración muestra el uso básico de lh-ui-plus: