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

Библиотека Naive UI предоставляет богатый набор UI-компонентов для Vue 3, которые можно использовать модульно. Это позволяет подключать только необходимые элементы, уменьшая размер бандла и улучшая производительность приложения.

Подход к импорту

Naive UI поддерживает два основных способа импорта компонентов:

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

    import { createApp } from 'vue'
import App from './App.vue'
import naive from 'naive-ui'

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

    При таком подходе все компоненты Naive UI регистрируются глобально. Это удобно для быстрого прототипирования, но может привести к увеличению размера финального бандла, так как включаются все компоненты библиотеки.

  2. Локальный импорт отдельных компонентов Оптимальный способ для production-приложений, где важен размер бандла.

    import { NButton, NInput } from 'naive-ui'

export default {
  components: {
    NButton,
    NInput
  }
}

    В этом случае в проект попадут только те компоненты, которые действительно используются.

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

Для проектов на TypeScript Naive UI предоставляет полную типизацию компонентов. Импорт компонентов и их использование остаются идентичными, но добавляется возможность типизации пропсов и событий:

import { NButton } from 'naive-ui'

export default {
  components: {
    NButton
  },
  methods: {
    handleClick(): void {
      console.log('Button clicked')
    }
  }
}

Типизация позволяет избежать ошибок при передаче некорректных значений в пропсы компонентов и обеспечивает автодополнение в редакторах типа VS Code.

Импорт стилей

Naive UI использует CSS-in-JS, что позволяет компонентам поставляться со встроенными стилями. Для локального импорта достаточно подключить компонент — стили подтянутся автоматически. Однако, если используется сборка с SSR или требуется глобальная настройка тем, возможен импорт глобальных стилей:

import 'naive-ui/dist/naive-ui.css'

Это гарантирует корректное отображение всех компонентов и применяемых тем оформления.

Динамический импорт компонентов

Иногда возникает необходимость загружать компоненты по мере необходимости, чтобы сократить первоначальный размер бандла. В Vue 3 это реализуется через динамический импорт:

import { defineAsyncComponent } from 'vue'

export default {
  components: {
    AsyncButton: defineAsyncComponent(() =>
      import('naive-ui').then(module => module.NButton)
    )
  }
}

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

Импорт иконок и утилит

Naive UI предоставляет набор встроенных иконок и утилит, которые импортируются отдельно:

import { NIcon } from 'naive-ui'
import { DeleteOutlined } from '@vicons/antd'

export default {
  components: {
    NIcon
  }
}

Комбинирование с внешними библиотеками иконок расширяет возможности кастомизации интерфейса без необходимости подключения тяжелых пакетов.

Рекомендации по оптимизации импорта

  • Использовать локальный импорт компонентов в production, чтобы минимизировать размер бандла.
  • Динамически импортировать редко используемые компоненты, особенно модальные окна, сложные таблицы и редакторы.
  • Проверять, какие утилиты и иконки действительно необходимы, подключая только их, а не всю библиотеку.
  • Подключать глобальные стили только при необходимости, иначе достаточно стандартного CSS-in-JS компонентов.

Пример комплексного локального импорта

import { NButton, NInput, NCard, NMessageProvider } from 'naive-ui'

export default {
  components: {
    NButton,
    NInput,
    NCard,
    NMessageProvider
  },
  setup() {
    const message = ref(null)
    const showMessage = () => {
      message.value.success('Компонент успешно загружен!')
    }
    return { showMessage }
  }
}

В этом примере демонстрируется подключение нескольких компонентов одновременно с использованием локальной регистрации и реактивного состояния для взаимодействия с пользователем. Такой подход обеспечивает контроль над размером бандла и гибкость при управлении интерфейсом.

Оглавление