Instalación

Requisitos del entorno

• Node.js >= 18
• pnpm >= 8

Instalación

# Con pnpm
pnpm add @lh-ui/vue3

# Con npm
npm install @lh-ui/vue3

# Con yarn
yarn add @lh-ui/vue3

Importar los componentes

Importación completa

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

Importación a demanda

Importa los componentes por nombre desde la ruta raíz del paquete e importa por separado los estilos del componente correspondiente (la subruta de estilos es @lh-ui/vue3/style/<nombre del componente>):

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

<template>
  <LhButton type="primary">Botón de estilo chino</LhButton>
</template>

Todavía no se ofrece un Resolver para unplugin-vue-components; la importación automática a demanda se puede realizar a mano siguiendo el patrón anterior, importando el componente y sus estilos.

La importación a demanda admite dos rutas de estilos:

Subruta	Descripción
@lh-ui/vue3/style/<nombre del componente>	Apunta al archivo fuente SCSS; permite sobrescribir las variables de diseño en el lado de consumo para una personalización profunda, pero requiere que el proyecto tenga instalado sass
@lh-ui/vue3/style-css/<nombre del componente>	Apunta al CSS precompilado en tiempo de compilación; listo para usar, sin necesidad de sass

// El proyecto tiene sass y necesita personalización profunda del tema
import '@lh-ui/vue3/style/button'

// El proyecto no tiene sass, o no necesita personalización
import '@lh-ui/vue3/style-css/button'

Importación por CDN

Los artefactos UMD del paquete se han publicado en un CDN público, adecuados para páginas de demostración o para escenarios en los que no se desea pasar por la cadena de empaquetado:

<!-- Componentes (expuestos globalmente como window.lhUiPlus) -->
<script src="https://unpkg.com/@lh-ui/vue3"></script>
<!-- o jsdelivr -->
<script src="https://cdn.jsdelivr.net/npm/@lh-ui/vue3"></script>
<!-- Estilos completos -->
<link rel="stylesheet" href="https://unpkg.com/@lh-ui/vue3/dist/index.css" />

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

Para fijar la versión, añade @<versión> tras el nombre del paquete, por ejemplo https://unpkg.com/@lh-ui/vue3@1.0.0. En entornos de producción se recomienda fijar la versión, para evitar que los artefactos del CDN se actualicen inesperadamente al publicarse una nueva versión.

Instalación desde un servidor privado

Si estás en una intranet, tienes el acceso a npm restringido o prefieres fijar la versión en un mirror propio, puedes instalar el tarball directamente desde el servidor privado del autor (los detalles de hospedaje se encuentran en la Guía de publicación):

# 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

O escríbelo en package.json:

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

La instalación del tarball omite la resolución de versiones del registry, de modo que las actualizaciones requieren sustituir la URL manualmente; este paquete no tiene dependencias en tiempo de ejecución, por lo que basta con que el proyecto tenga Vue 3 instalado.

Si prefieres instalarlo como un paquete normal, con pnpm add @lhgb/vue3 y resolución de versiones, puedes usar el enfoque de metadatos de registry privado.