Первый проект на Naive UI

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

  • Формы и элементы ввода: NInput, NSelect, NCheckbox, NRadio.
  • Навигация и контейнеры: NLayout, NMenu, NTabs.
  • Модальные окна и уведомления: NDialog, NNotification, NMessage.
  • Отображение данных: NCard, NTable, NTag.

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

Создание простого интерфейса

Для примера создадим базовую форму с текстовым полем и кнопкой. В App.vue:

<template>
  <n-card title="Регистрация">
    <n-form :model="form" @submit.prevent="handleSubmit">
      <n-form-item label="Имя">
        <n-input v-model="form.name" placeholder="Введите имя" />
      </n-form-item>
      <n-form-item label="Email">
        <n-input v-model="form.email" type="email" placeholder="Введите email" />
      </n-form-item>
      <n-form-item>
        <n-button type="primary" native-type="submit">Отправить</n-button>
      </n-form-item>
    </n-form>
  </n-card>
</template>

<script>
import { reactive } from 'vue'

export default {
  setup() {
    const form = reactive({
      name: '',
      email: ''
    })

    const handleSubmit = () => {
      console.log('Данные формы:', form)
    }

    return { form, handleSubmit }
  }
}
</script>

Здесь используется:

  • NCard для обрамления формы.
  • NForm и NFormItem для структурирования полей.
  • NInput с двусторонней привязкой через v-model.
  • NButton для отправки данных.

Использование модальных окон и уведомлений

Для создания модальных окон используется NDialog через функцию useDialog, которая возвращает методы info, success, warning, error и confirm:

import { useDialog } from 'naive-ui'

export default {
  setup() {
    const dialog = useDialog()

    const showConfirm = () => {
      dialog.info({
        title: 'Подтверждение',
        content: 'Вы действительно хотите продолжить?',
        positiveText: 'Да',
        negativeText: 'Нет'
      })
    }

    return { showConfirm }
  }
}

Для уведомлений на странице применяются функции useMessage и useNotification:

import { useMessage, useNotification } from 'naive-ui'

const message = useMessage()
const notification = useNotification()

message.success('Действие успешно выполнено')
notification.info({
  title: 'Информация',
  content: 'Это уведомление с Naive UI'
})

Настройка темы и стилей

Naive UI поддерживает динамическую настройку темы:

import { createApp } from 'vue'
import { createNaiveUi } from 'naive-ui'

const app = createApp(App)

app.use(createNaiveUi({
  theme: {
    common: {
      primaryColor: '#1abc9c',
      infoColor: '#3498db'
    },
    Button: {
      borderRadius: '8px'
    }
  }
}))

Можно настраивать как общие цвета и шрифты, так и параметры конкретных компонентов через соответствующие секции theme.

Создание сложной таблицы с фильтрацией

NTable позволяет строить таблицы с сортировкой, фильтрацией и кастомными ячейками:

<template>
  <n-table :columns="columns" :data="tableData" :scroll="{ x: '800px' }" />
</template>

<script>
export default {
  setup() {
    const tableData = [
      { name: 'Иван', age: 28, role: 'Разработчик' },
      { name: 'Мария', age: 32, role: 'Дизайнер' },
      { name: 'Алексей', age: 25, role: 'Тестировщик' }
    ]

    const columns = [
      { title: 'Имя', key: 'name', sorter: (a, b) => a.name.localeCompare(b.name) },
      { title: 'Возраст', key: 'age', sorter: (a, b) => a.age - b.age },
      { title: 'Роль', key: 'role', filter: { options: ['Разработчик', 'Дизайнер', 'Тестировщик'] } }
    ]

    return { tableData, columns }
  }
}
</script>

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

  • Поддержка горизонтального скролла для длинных таблиц.
  • Встроенные функции сортировки и фильтры.
  • Возможность кастомного отображения ячеек через слоты.

Слоты и кастомизация компонентов

Naive UI активно использует слоты для изменения визуального и функционального поведения компонентов:

<n-button>
  <template #icon>
    <svg width="16" height="16" viewBox="0 0 24 24">
      <path d="M12 2L15 8H9L12 2Z" fill="currentColor"/>
    </svg>
  </template>
  Нажми меня
</n-button>

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

  • Любой компонент поддерживает именованные слоты (#icon, #default, #footer).
  • Слоты позволяют внедрять HTML, SVG, и даже другие Vue-компоненты внутрь стандартных элементов Naive UI.

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

Для масштабных проектов с Naive UI полезно:

  • Создавать отдельные файлы для компонентов (например, FormCard.vue, UserTable.vue).
  • Использовать composables для управления состоянием модальных окон и уведомлений.
  • Соблюдать единый стиль темизации, чтобы интерфейс был единообразным.
  • Активно применять слоты, чтобы избежать дублирования кода и повысить гибкость компонентов.

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

Naive UI хорошо сочетается с современными инструментами Vue:

  • Vue Router – позволяет создавать навигационные панели и контентные области с NLayout и NMenu.
  • Pinia – обеспечивает реактивное состояние для форм, таблиц и уведомлений, упрощая передачу данных между компонентами.

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

import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({ users: [] }),
  actions: {
    addUser(user) {
      this.users.push(user)
    }
  }
})

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

Оглавление