Установка

Требования к окружению

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

Установка

# Через pnpm
pnpm add @lh-ui/vue3

# Через npm
npm install @lh-ui/vue3

# Через yarn
yarn add @lh-ui/vue3

Импорт компонентов

Полный импорт

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

Импорт по требованию

Компоненты импортируются поименованными экспортами из корня пакета, а стили каждого компонента подключаются отдельно (подпуть стилей — @lh-ui/vue3/style/<компонент>):

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

<template>
  <LhButton type="primary">Кнопка в китайском стиле</LhButton>
</template>

Resolver для unplugin-vue-components пока не предоставляется: для автоматического импорта по требованию используйте ручной импорт компонентов и стилей, как показано выше.

Для импорта по требованию доступны два пути к стилям:

Подпуть	Описание
@lh-ui/vue3/style/<компонент>	указывает на исходный SCSS-файл: на стороне потребителя можно переопределять дизайн-переменные для глубокой настройки, но проект должен установить sass
@lh-ui/vue3/style-css/<компонент>	указывает на предкомпилированный CSS: работает из коробки, sass не требуется

// В проекте есть sass и нужна глубокая настройка темы
import '@lh-ui/vue3/style/button'

// В проекте нет sass или настройка не нужна
import '@lh-ui/vue3/style-css/button'

Подключение через CDN

UMD-сборка пакета опубликована на публичных CDN — подходит для демо-страниц или сценариев без сборщика:

<!-- Компоненты (глобально доступно window.lhUiPlus) -->
<script src="https://unpkg.com/@lh-ui/vue3"></script>
<!-- или jsdelivr -->
<script src="https://cdn.jsdelivr.net/npm/@lh-ui/vue3"></script>
<!-- Полные стили -->
<link rel="stylesheet" href="https://unpkg.com/@lh-ui/vue3/dist/index.css" />

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

Чтобы зафиксировать версию, добавьте @<version> после имени пакета, например https://unpkg.com/@lh-ui/vue3@1.0.0. В продакшене рекомендуется фиксировать версию, чтобы CDN-сборка случайно не обновилась при выходе нового релиза.

Установка с частного сервера

Если вы работаете во внутренней сети, с ограниченным доступом к npm или хотите зафиксировать версию на собственном зеркале, можно установить tarball напрямую с сервера автора (детали хостинга см. в Руководстве по публикации):

# 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

Или добавьте запись в package.json:

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

Установка tarball обходит версионное разрешение registry, поэтому при обновлении URL нужно менять вручную; у пакета нулевые зависимости во время выполнения — достаточно, чтобы в проекте был установлен Vue 3.

Если вы хотите устанавливать пакет как обычный (pnpm add @lhgb/vue3) с версионным разрешением, используйте метод registry-метаданных на частном сервере.