Подключение через CDN

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

Подключение скриптов и стилей

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

  1. CSS — стили компонентов.
  2. JS — сама библиотека с компонентами и API.

Пример подключения через официальный CDN:

<!-- Стили Naive UI -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/naive-ui@2/dist/naive-ui.css">

<!-- Vue 3 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

<!-- Naive UI -->
<script src="https://cdn.jsdelivr.net/npm/naive-ui@2/dist/naive-ui.min.js"></script>

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

  • Порядок подключения имеет значение: сначала подключается Vue, затем Naive UI, иначе компоненты не будут работать.
  • Версия Naive UI указывается явно через @2 или другую актуальную версию, чтобы избежать несовместимости с Vue.

Инициализация приложения

После подключения скриптов создается экземпляр Vue и регистрируется Naive UI как плагин:

<div id="app">
  <n-button @click="clicked">Нажми меня</n-button>
</div>

<script>
const { createApp, ref } = Vue;
const { create, NButton } = naiveUI;

const app = createApp({
  setup() {
    const clicked = () => alert('Кнопка нажата');
    return { clicked };
  }
});

app.use(create());
app.component('NButton', NButton);

app.mount('#app');
</script>

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

  • Используется функция create() для установки плагина Naive UI.
  • Компоненты можно регистрировать глобально через app.component().
  • Все API и компоненты доступны через объект naiveUI после подключения скрипта.

Доступные компоненты и регистрация

Naive UI предоставляет более 50 готовых компонентов: кнопки, формы, модальные окна, таблицы, уведомления и многое другое. Через CDN регистрация компонентов возможна двумя способами:

  1. Глобальная регистрация всех компонентов
app.use(create());

Все компоненты Naive UI будут доступны без отдельной регистрации. Удобно для быстрого прототипирования, но увеличивает размер страницы.

  1. Локальная регистрация отдельных компонентов
app.component('NButton', NButton);
app.component('NInput', NInput);

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

Работа с темами и настройками

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

const naive = create({
  theme: {
    common: {
      primaryColor: '#42b983'
    }
  },
  locale: 'ru-RU'
});

app.use(naive);
  • theme.common.primaryColor позволяет задать основной цвет для всех компонентов.
  • locale управляет локализацией элементов, таких как календарь, уведомления и кнопки.

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

CDN-версия полностью совместима с Composition API:

const { ref } = Vue;

app.component('Counter', {
  template: `<div>{{ count }} <n-button @click="increment">+</n-button></div>`,
  setup() {
    const count = ref(0);
    const increment = () => count.value++;
    return { count, increment };
  }
});

Компоненты Naive UI можно использовать как внутри шаблонов Vue, так и через render-функции, используя API h().

Подключение иконок

Для использования иконок Naive UI через CDN необходимо подключить отдельный пакет:

<script src="https://cdn.jsdelivr.net/npm/@vicons/ionicons@latest/dist/ionicons.min.js"></script>

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

const { NIcon } = naiveUI;
const { IonAdd } = viconsIonicons;

app.component('NIcon', NIcon);
app.component('IonAdd', IonAdd);

Комбинация с NIcon позволяет интегрировать любую SVG-иконку в кнопки и другие элементы интерфейса.

Советы по оптимизации

  • Для больших проектов предпочтительнее использовать сборку через Vite или Webpack, чтобы уменьшить размер пакетов.
  • CDN хорошо подходит для прототипов, образовательных проектов и демонстраций.
  • Использование версий через @latest может привести к неожиданным несовместимостям при обновлении. Рекомендуется фиксировать версию.

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

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Naive UI CDN</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/naive-ui@2/dist/naive-ui.css">
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/naive-ui@2/dist/naive-ui.min.js"></script>
</head>
<body>
<div id="app">
  <n-button @click="showAlert">Нажми меня</n-button>
</div>

<script>
const { createApp } = Vue;
const { create, NButton } = naiveUI;

const app = createApp({
  setup() {
    const showAlert = () => alert('Привет, Naive UI!');
    return { showAlert };
  }
});

app.use(create());
app.component('NButton', NButton);
app.mount('#app');
</script>
</body>
</html>

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

Оглавление