Интеграция с Vue 3

Для начала работы с Naive UI необходимо установить библиотеку через npm или yarn:

npm install naive-ui
# или
yarn add naive-ui

После установки следует подключить библиотеку в вашем проекте Vue 3. Наиболее распространённый подход — регистрация компонентов через плагин в main.js или main.ts:

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 становятся глобально доступными в приложении.

Использование компонентов Naive UI

Naive UI предоставляет широкий набор компонентов: кнопки, формы, таблицы, уведомления и многое другое. Каждый компонент можно настраивать с помощью props, слотов и событий.

Пример кнопки с обработкой события:

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

<script setup>
import { ref } from 'vue';

const handleClick = () => {
  console.log('Кнопка нажата');
};
</script>

Ключевые моменты:

  • n-button — основной компонент кнопки;
  • type="primary" задаёт стиль кнопки;
  • @click позволяет привязать обработчик события.

Работа с формами и валидацией

Naive UI предоставляет компоненты для построения форм: n-form, n-form-item, n-input, n-select и другие. Валидация настраивается через rules и встроенные функции проверки.

Пример формы с валидацией:

<template>
  <n-form :model="formData" :rules="rules" ref="formRef">
    <n-form-item label="Имя" path="name">
      <n-input v-model:value="formData.name" placeholder="Введите имя" />
    </n-form-item>
    <n-form-item>
      <n-button type="primary" @click="submitForm">Отправить</n-button>
    </n-form-item>
  </n-form>
</template>

<script setup>
import { ref } from 'vue';

const formRef = ref(null);
const formData = ref({ name: '' });

const rules = {
  name: [
    { required: true, message: 'Имя обязательно для заполнения', trigger: 'blur' },
    { min: 3, message: 'Имя должно содержать не менее 3 символов', trigger: 'blur' }
  ]
};

const submitForm = () => {
  formRef.value.validate().then(() => {
    console.log('Форма валидна', formData.value);
  }).catch(errors => {
    console.log('Ошибки валидации', errors);
  });
};
</script>

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

  • n-form управляет состоянием формы;
  • path в n-form-item указывает поле модели для привязки и валидации;
  • метод validate() возвращает Promise, позволяя обрабатывать результат асинхронно.

Настройка темы и глобальных стилей

Naive UI поддерживает темизацию через объект ConfigProvider. Это позволяет менять цвета, размеры компонентов и шрифты глобально.

Пример глобальной темы:

<template>
  <n-config-provider :theme="customTheme">
    <n-button>Кнопка с кастомной темой</n-button>
  </n-config-provider>
</template>

<script setup>
const customTheme = {
  common: {
    primaryColor: '#1e90ff',
    borderRadius: '6px'
  },
  Button: {
    colorPrimary: '#1e90ff',
    borderRadius: '6px'
  }
};
</script>

Преимущества использования ConfigProvider:

  • единая точка настройки внешнего вида;
  • возможность динамически менять тему в зависимости от состояния приложения;
  • поддержка светлой и тёмной темы через параметр themeOverrides.

Реактивность и управление состоянием компонентов

Все компоненты Naive UI полностью совместимы с реактивностью Vue 3. Можно использовать ref, reactive и computed для управления состоянием компонентов.

Пример реактивного переключателя:

<template>
  <n-switch v-model:value="isEnabled" @update:value="onToggle" />
  <p>Статус: {{ isEnabled ? 'Включено' : 'Выключено' }}</p>
</template>

<script setup>
import { ref } from 'vue';

const isEnabled = ref(false);

const onTog gle = (value) => {
  console.log('Состояние переключателя:', value);
};
</script>

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

  • v-model:value обеспечивает двухстороннюю привязку данных;
  • событие @update:value позволяет отслеживать изменения состояния;
  • можно использовать реактивные вычисляемые свойства для динамического изменения свойств компонента.

Интеграция с маршрутизатором Vue Router

Naive UI компоненты легко интегрируются с маршрутизатором для навигации и управления состоянием страниц. Например, для кнопки, которая должна перенаправлять на другую страницу, достаточно использовать событие @click вместе с router.push():

<template>
  <n-button @click="goToPage">Перейти на другую страницу</n-button>
</template>

<script setup>
import { useRouter } from 'vue-router';

const router = useRouter();

const goToPage = () => {
  router.push({ name: 'About' });
};
</script>

Работа с модальными окнами и уведомлениями

Naive UI предоставляет удобные методы для динамического отображения модальных окон (n-modal) и уведомлений (n-notification, n-message).

Пример уведомления:

<template>
  <n-button @click="showNotification">Показать уведомление</n-button>
</template>

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

const notification = useNotification();

const showNotification = () => {
  notification.success({
    title: 'Успех',
    content: 'Операция выполнена успешно',
    duration: 3000
  });
};
</script>

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

  • useNotification() создаёт реактивный объект для управления уведомлениями;
  • duration задаёт время отображения уведомления в миллисекундах;
  • поддерживаются разные типы уведомлений: success, warning, error, info.

Оптимизация производительности

Naive UI создан с учётом производительности:

  • компоненты легковесные и используют виртуальный DOM Vue 3;
  • поддержка lazy-loading для больших списков через n-data-table с виртуальной прокруткой;
  • возможность динамического импорта отдельных компонентов для уменьшения размера бандла:
import { defineAsyncComponent } from 'vue';

const NButton = defineAsyncComponent(() =>
  import('naive-ui/lib/button')
);

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

Итоговая структура интеграции с Vue 3

  1. Установка через npm/yarn.
  2. Подключение через app.use(naive).
  3. Использование компонентов с реактивной привязкой данных.
  4. Настройка тем и глобальных стилей через ConfigProvider.
  5. Интеграция с Vue Router и динамическое управление состоянием.
  6. Использование уведомлений и модальных окон через встроенные хуки.
  7. Оптимизация загрузки компонентов и таблиц для повышения производительности.

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

Оглавление