Глобальная и локальная регистрация

В библиотеке Naive UI компоненты можно использовать двумя основными способами: через глобальную регистрацию и через локальную регистрацию. Глобальная регистрация делает компоненты доступными во всех частях приложения, что особенно удобно для часто используемых элементов интерфейса.

Подключение и регистрация

Для глобальной регистрации компонентов используется функция create из naive-ui и метод app.use(). Пример базовой конфигурации:

import { createApp } from 'vue';
import App from './App.vue';
import { create, NButton, NInput } from 'naive-ui';

const naive = create({
  components: [NButton, NInput]
});

const app = createApp(App);
app.use(naive);
app.mount('#app');

В этом примере:

  • create формирует экземпляр Naive UI с набором компонентов.
  • Массив components указывает, какие компоненты будут доступны глобально.
  • app.use(naive) подключает библиотеку к приложению Vue.

После этого NButton и NInput можно использовать в любом компоненте Vue без дополнительного импорта.

Глобальная регистрация всех компонентов

Если проект небольшой или требуется полный доступ ко всем компонентам, Naive UI позволяет регистрировать всё сразу:

import { create, NConfigProvider } from 'naive-ui';

const naive = create({
  components: 'all'
});

Использование 'all' регистрирует все доступные компоненты и утилиты, включая модальные окна, таблицы, селекты и элементы навигации. Такой подход упрощает разработку, но увеличивает размер финального бандла, поэтому для больших проектов рекомендуется выбирать только необходимые компоненты.

Глобальная конфигурация свойств

Naive UI поддерживает глобальные настройки компонентов через globalConfig:

const naive = create({
  components: [NButton],
  config: {
    global: {
      button: {
        size: 'large',
        round: true
      }
    }
  }
});

В этом примере все кнопки в приложении по умолчанию будут круглыми и большого размера. Это позволяет централизованно управлять стилями и поведением компонентов без повторного указания свойств.

Локальная регистрация компонентов

Локальная регистрация используется, когда компонент нужен только в пределах конкретного Vue-компонента. Это снижает нагрузку на бандл и повышает читаемость кода.

Импорт и регистрация внутри компонента

<template>
  <n-button @click="onClick">Нажми меня</n-button>
</template>

<script>
import { NButton } from 'naive-ui';

export default {
  components: {
    NButton
  },
  methods: {
    onClick() {
      console.log('Кнопка нажата');
    }
  }
};
</script>

Особенности:

  • components в объекте компонента Vue содержит локально зарегистрированные компоненты.
  • Импортируемый компонент используется только внутри этого Vue-компонента.
  • Такой подход снижает вероятность конфликтов и позволяет точечно контролировать зависимости.

Локальная регистрация с глобальной конфигурацией

Даже при локальной регистрации возможно применение глобальных настроек:

import { NButton, create } from 'naive-ui';

const naive = create({
  config: {
    global: {
      button: {
        type: 'primary'
      }
    }
  }
});

export default {
  components: {
    NButton
  }
};

В этом случае кнопка будет использовать глобальную конфигурацию (type: 'primary'), несмотря на локальный импорт. Такой подход комбинирует преимущества локальной регистрации с единым стилевым стандартом.

Сравнение глобальной и локальной регистрации

Характеристика Глобальная регистрация Локальная регистрация
Доступность Во всех компонентах приложения Только внутри конкретного компонента
Размер бандла Увеличивает при регистрации многих компонентов Минимизируется, так как импорт только необходимого
Простота использования Высокая — не нужно повторно импортировать Требует явного импорта и объявления
Управление конфигурацией Поддержка глобальной конфигурации Локальные компоненты могут наследовать глобальную конфигурацию

Рекомендации по использованию

  • Глобальная регистрация подходит для часто используемых компонентов: кнопок, полей ввода, таблиц.
  • Локальная регистрация предпочтительна для редко используемых компонентов или когда важно минимизировать бандл.
  • Комбинация методов позволяет гибко управлять доступностью компонентов и оптимизировать производительность.

Использование с TypeScript

Naive UI полностью совместим с TypeScript. При локальной регистрации можно использовать типы компонентов для автодополнения и проверки свойств:

import type { ButtonProps } from 'naive-ui';
import { NButton } from 'naive-ui';

export default {
  components: { NButton },
  methods: {
    handleClick(props: ButtonProps) {
      console.log(props.type);
    }
  }
};

Типизация помогает избежать ошибок при передаче свойств и упрощает интеграцию с IDE.

Итоговая структура проекта

Для больших проектов удобно комбинировать оба подхода:

  1. В main.js или main.ts регистрируются глобально базовые компоненты (кнопки, инпуты, модальные окна).
  2. В отдельных Vue-компонентах подключаются редко используемые или специализированные элементы, что улучшает модульность и скорость сборки.

Такой подход обеспечивает баланс между удобством разработки, масштабируемостью и производительностью.

Оглавление