Установка

Зависимости

@lh-ui/share будет установлен автоматически (единственная runtime-зависимость библиотеки).
Проект uni-app на Vue3 (@dcloudio/uni-app 3.x).
Для WeChat Mini Program требуется базовая библиотека ≥ 2.25.2 (root-portal); на более старых версиях происходит деградация до fallback с фиксированным позиционированием внутри страницы.

Способ 1: импорт по требованию через easycom (рекомендуется)

После установки добавьте одно правило easycom в pages.json:

json

{
  "easycom": {
    "autoscan": false,
    "custom": {
      "^lh-(.*)": "@lh-ui/uniapp/src/components/lh-$1/lh-$1.vue"
    }
  }
}

После этого можно писать теги прямо в шаблоне — не нужен import и регистрация:

vue

<template>
  <lh-button type="primary" @click="onTap">Кнопка</lh-button>
</template>

Настройки easycom применяются не сразу

Ради производительности компиляции uni-app не запускает пересборку при изменении easycom в pages.json. После изменения правила измените содержимое страницы (или перезапустите dev server), чтобы оно вступило в силу. Это штатное поведение uni-app, а не проблема библиотеки.

Способ 2: полная регистрация

Если easycom не подходит (например, в H5-проекте хочется импортировать всё сразу), используйте app.use:

// main.ts
import { createSSRApp } from 'vue'
import lhUiUniapp from '@lh-ui/uniapp'
import App from './App.vue'

export function createApp() {
  const app = createSSRApp(App)
  app.use(lhUiUniapp)
  return { app }
}

Подключение стилей

В обоих способах подключаются два CSS-артефакта (у пользователя нет зависимости от sass, стили уже санитизированы на этапе сборки в самодостаточный CSS):

// main.ts
import '@lh-ui/uniapp/src/theme/index.css' // переменные темы (page { --lh-* } + page.dark для тёмной)
import '@lh-ui/uniapp/src/icon/iconfont.css' // шрифт с иконками (зависимость компонента lh-icon)

Почему это артефакты сборки, а не scss-исходники

В проектах uni-app loadPaths для sass не включает node_modules, поэтому bare-спецификаторы вида @use '@lh-ui/share/...' не разрешаются и прямое подключение неизбежно ломает сборку. Потому библиотека отдаёт на этапе сборки самодостаточный CSS, а компоненты SFC подключают его через <style src="./style.css">. Это также означает, что пользователю не нужно устанавливать sass.

Императивные сервисы требуют точку монтирования

Message / Loading не могут создавать DOM из JS в Mini Program и используют паттерн точки монтирования. На странице (или в корневом компоненте), где они нужны, разместите компоненты-точки монтирования:

vue

<template>
  <lh-config-provider :theme="theme">
    <view class="content"><!-- Содержимое страницы --></view>

    <!-- Точка монтирования императивных сервисов -->
    <lh-message />
    <lh-loading />
  </lh-config-provider>
</template>

<script setup lang="ts">
import { useLhMessage } from '@lh-ui/uniapp'

const { success } = useLhMessage()
const onTap = () => success('Операция выполнена')
</script>

Без точки монтирования будет предупреждение

Если вызван useLhMessage(), а на странице нет <lh-message />, в режиме разработки будет выдан явный console.error, без молчаливой деградации. Это сознательное решение: молчаливая деградация превращает «вызов вроде сработал, но реакции нет» в скрытый баг.

TypeScript

Библиотека поставляется с типами: для Props компонентов и событий есть полная выводимость типов. При использовании easycom типы тегов в шаблоне предоставляются системой типов компонентов uni-app (если в проекте не настроены типы глобальных компонентов, используйте явную аннотацию LhXxxProps).

Установка ​

Зависимости ​

Способ 1: импорт по требованию через easycom (рекомендуется) ​

Способ 2: полная регистрация ​

Подключение стилей ​

Императивные сервисы требуют точку монтирования ​

TypeScript ​