Démarrage rapide

Créer un projet Vue 3

# Créer un projet Vite avec pnpm
pnpm create vite my-app --template vue-ts
cd my-app

Installer @lh-ui/vue3

pnpm add @lh-ui/vue3

Import complet (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')

Utiliser les composants

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

<template>
  <div>
    <LhButton type="primary">Bouton principal</LhButton>
    <LhButton type="success">Bouton de succès</LhButton>
    <LhButton type="warning">Bouton d'avertissement</LhButton>
    <LhButton type="danger">Bouton de danger</LhButton>
    <LhButton type="info">Bouton d'information</LhButton>
  </div>
</template>

Configuration globale et thème

LhConfigProvider fournit la configuration globale (langue, taille) et les variables de thème (themeVars), chacune transmise via sa propre 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">Bouton de style chinois</LhButton>
  </LhConfigProvider>
</template>

• locale : le paquet linguistique, importé nommément depuis la racine du paquet (zhCN / enUS).
• size : la taille globale, parmi small / medium / large / mini.
• themeVars : les variables de thème, dont les clés peuvent omettre le préfixe --lh-. Les thèmes prédéfinis peuvent être basculés en un geste avec useLhPresetTheme, voir Thèmes prédéfinis.

Exemple en ligne

Voici une démonstration de l'utilisation de base de lh-ui-plus :