Installation

Configuration requise

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

Installation

# Avec pnpm
pnpm add @lh-ui/vue3

# Avec npm
npm install @lh-ui/vue3

# Avec yarn
yarn add @lh-ui/vue3

Import des composants

Import complet

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

Import à la demande

Importez nommément les composants depuis la racine du paquet, et importez séparément les styles du composant correspondant (le sous-chemin des styles est @lh-ui/vue3/style/<nom-du-composant>) :

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

<template>
  <LhButton type="primary">Bouton de style chinois</LhButton>
</template>

Aucun Resolver pour unplugin-vue-components n'est fourni pour le moment ; l'import automatique à la demande se fait manuellement en suivant l'écriture ci-dessus, composant et styles compris.

Deux sous-chemins de styles sont possibles pour l'import à la demande :

Sous-chemin	Description
@lh-ui/vue3/style/<nom-du-composant>	Pointe vers le fichier source SCSS, ce qui permet de surcharger les variables de conception côté projet pour une personnalisation approfondie, mais requiert l'installation de sass dans le projet
@lh-ui/vue3/style-css/<nom-du-composant>	Pointe vers le CSS précompilé à la construction, prêt à l'emploi, sans nécessiter sass

// Le projet dispose de sass et nécessite une personnalisation approfondie du thème
import '@lh-ui/vue3/style/button'

// Le projet n'a pas sass, ou n'a pas besoin de personnalisation
import '@lh-ui/vue3/style-css/button'

Import via CDN

Les artéfacts UMD du paquet sont publiés sur des CDN publics, adaptés aux pages de démonstration ou aux contextes sans chaîne de bundling :

<!-- Composants (exposés globalement via window.lhUiPlus) -->
<script src="https://unpkg.com/@lh-ui/vue3"></script>
<!-- ou jsdelivr -->
<script src="https://cdn.jsdelivr.net/npm/@lh-ui/vue3"></script>
<!-- Styles complets -->
<link rel="stylesheet" href="https://unpkg.com/@lh-ui/vue3/dist/index.css" />

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

Pour verrouiller une version, ajoutez @<version> après le nom du paquet, par ex. https://unpkg.com/@lh-ui/vue3@1.0.0. En production, il est recommandé de verrouiller la version afin d'éviter une mise à niveau accidentelle des artéfacts CDN lors de la publication d'une nouvelle version.

Installation depuis un serveur privé

Si vous vous trouvez sur un intranet, avez un accès npm restreint, ou souhaitez verrouiller la version sur un miroir que vous hébergez, vous pouvez installer le tarball directement depuis le serveur privé de l'auteur (les détails d'hébergement se trouvent dans le guide de publication) :

# 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

Ou inscrivez-le dans package.json :

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

L'installation par tarball contourne la résolution des versions du registry : toute mise à niveau nécessite le remplacement manuel de l'URL ; ce paquet n'a aucune dépendance d'exécution, seule la présence de Vue 3 dans le projet est requise.

Si vous préférez installer comme un paquet ordinaire pnpm add @lhgb/vue3 en bénéficiant de la résolution des versions, utilisez l'approche par métadonnées de registry privé.