Что такое Naive UI

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

Ключевыми особенностями являются:

  • Модульность компонентов: каждый компонент можно импортировать отдельно, что снижает размер бандла.
  • Поддержка TypeScript: все компоненты строго типизированы, что повышает безопасность кода.
  • Гибкая система темы: возможность легко менять цвета, размеры и стиль элементов интерфейса.
  • Адаптивность и доступность: компоненты автоматически учитывают адаптивность и соответствие стандартам ARIA.

Установка и базовая настройка

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

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

Далее библиотека подключается в проекте Vue 3 через createApp:

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 предоставляет широкий набор компонентов: кнопки, формы, таблицы, диалоги, уведомления, селекты и многое другое. Все компоненты имеют стандартные props, слоты и события, что облегчает их интеграцию.

Пример использования кнопки

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

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

Особенности компонента n-button:

  • type — задает визуальный стиль (primary, success, error, warning, info).
  • size — регулирует размер кнопки (small, medium, large).
  • disabled — отключает взаимодействие.

Слоты и кастомизация

Большинство компонентов Naive UI поддерживают слоты, позволяя вставлять в них собственный контент. Например, для n-card можно определить заголовок и основной блок:

<n-card>
  <template #header>
    Заголовок карточки
  </template>
  Основной контент карточки
</n-card>

Темизация и настройка внешнего вида

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

import { create, globalTheme } from 'naive-ui'

const naive = create({
  theme: {
    common: {
      primaryColor: '#42b983',
      infoColor: '#2d8cf0',
    },
    Button: {
      borderRadius: '8px'
    }
  }
})

Локальная тема позволяет изменить стиль конкретного компонента без влияния на другие:

<n-button :theme="{
  Button: {
    color: 'red',
    borderRadius: '12px'
  }
}">
  Красная кнопка
</n-button>

Управление состоянием и взаимодействие

Naive UI активно использует реактивные свойства Vue 3, что позволяет связывать значения компонентов с реактивными переменными:

<template>
  <n-input v-model:value="username" placeholder="Введите имя" />
  <p>Имя: {{ username }}</p>
</template>

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

const username = ref('')
</script>

Для компонентов, таких как n-modal или n-notification, доступны методы управления состоянием через контрольные пропсы и события, например:

<n-dialog v-model:show="isDialogVisible">
  Контент диалога
</n-dialog>
const isDialogVisible = ref(false)

Система уведомлений

Naive UI предоставляет централизованную систему уведомлений (n-notification), которая позволяет создавать всплывающие сообщения:

import { useNotification } from 'naive-ui'

const notification = useNotification()

notification.success({
  title: 'Успех',
  content: 'Данные успешно сохранены',
  duration: 3000
})

Основные методы:

  • success — для успешных действий
  • error — для ошибок
  • info — информационные сообщения
  • warning — предупреждения

Можно также настраивать позиции уведомлений (top-right, bottom-left и т.д.) и длительность отображения.

Формы и валидация

Компоненты форм (n-form, n-form-item, n-input, n-select) поддерживают валидаторы и реактивные модели:

<n-form :model="formData" :rules="rules">
  <n-form-item label="Email" path="email">
    <n-input v-model:value="formData.email" />
  </n-form-item>
  <n-button @click="submitForm">Отправить</n-button>
</n-form>
import { reactive } from 'vue'

const formData = reactive({ email: '' })
const rules = {
  email: [
    { required: true, message: 'Введите email', trigger: 'blur' },
    { type: 'email', message: 'Неверный формат' }
  ]
}

const submitForm = () => {
  console.log('Форма отправлена:', formData)
}

Работа с таблицами и списками

Naive UI предоставляет мощные компоненты для отображения табличных данных: n-data-table, n-data-tbody, n-data-th, n-data-tr.

Пример простой таблицы:

<n-data-table :columns="columns" :data="rows" />
const columns = [
  { title: 'Имя', key: 'name' },
  { title: 'Возраст', key: 'age' },
  { title: 'Город', key: 'city' }
]

const rows = [
  { name: 'Иван', age: 25, city: 'Москва' },
  { name: 'Ольга', age: 30, city: 'Санкт-Петербург' }
]

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

Анимации и переходы

Naive UI использует встроенные CSS-анимации и Vue Transition. Для модальных окон, уведомлений и выпадающих списков анимация включена по умолчанию. Для кастомных анимаций можно использовать стандартный Vue <transition> или <transition-group> вместе с компонентами Naive UI.

Итоговые особенности

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

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

Оглавление