Установка и конфигурация

Для работы с любыми UI-библиотеками в SvelteKit необходимо иметь корректно настроенный проект. Создание нового проекта выполняется через официальную команду:

npm create svelte@latest my-app
cd my-app
npm install

Во время инициализации будет предложено выбрать тип проекта: Skeleton Project или Demo App. Для учебных целей рекомендуется начинать с Skeleton, чтобы не было лишнего кода, мешающего изучению UI-библиотек.

После установки базового проекта важно проверить версию Node.js. SvelteKit требует Node.js версии 16.8 и выше. Проверка выполняется командой:

node -v

Если версия ниже рекомендуемой, необходимо обновить Node.js через официальный сайт или менеджеры версий (например, nvm).

Установка UI-библиотек

В экосистеме Svelte существует несколько популярных UI-библиотек, таких как:

  • Svelte Material UI (SMUI) — реализация Material Design компонентов.
  • Skeleton UI — современный минималистичный набор компонентов с TailwindCSS.
  • Flowbite-Svelte — компоненты, основанные на TailwindCSS и Flowbite.
  • SvelteStrap — обертка над Bootstrap для Svelte.

Установка каждой библиотеки выполняется через npm. Например, для Svelte Material UI:

npm install --save-dev @smui/button @smui/card

Для Skeleton UI достаточно установить основной пакет:

npm install @skeletonlabs/skeleton

Некоторые библиотеки требуют дополнительных зависимостей или настроек TailwindCSS. Skeleton, например, использует TailwindCSS и требует конфигурации tailwind.config.cjs и svelte.config.js.

Конфигурация TailwindCSS для UI-библиотек

Большинство современных Svelte UI-библиотек интегрируются с TailwindCSS. Настройка Tailwind в SvelteKit выполняется следующим образом:

  1. Установка TailwindCSS и зависимостей:
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init tailwind.config.cjs -p
  1. Настройка файлового пути для Svelte:
// tailwind.config.cjs
module.exports = {
  content: ['./src/**/*.{html,js,svelte,ts}'],
  theme: {
    extend: {},
  },
  plugins: [],
};
  1. Добавление Tailwind в глобальные стили проекта:
/* src/app.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
  1. Импорт стилей в главный файл приложения:
// src/routes/+layout.svelte
<script>
  import "../app.css";
</script>

<slot />

После этого можно использовать компоненты UI-библиотеки, опираясь на Tailwind-классы.

Настройка SvelteKit для UI-библиотек

Некоторые UI-библиотеки требуют включения адаптеров или модификаций в svelte.config.js. Например, Skeleton UI рекомендует:

import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/kit/vite';
import { skeleton } from '@skeletonlabs/skeleton/vite-plugin';

export default {
  preprocess: vitePreprocess(),
  kit: {
    adapter: adapter(),
    vite: {
      plugins: [skeleton()]
    }
  }
};

Включение плагина Skeleton обеспечивает автоматическое подключение стилей, компонентов и оптимизацию для разработки и сборки.

Для других библиотек (SMUI, Flowbite-Svelte) специфические плагины не требуются, достаточно корректного подключения стилей и компонентов в проект.

Организация структуры проекта с UI-компонентами

Для поддержания читаемости проекта рекомендуется разделять UI-компоненты и страницы:

src/
 ├─ lib/
 │   └─ components/   # кастомные компоненты
 ├─ routes/
 │   └─ +page.svelte  # страницы приложения
 └─ app.css           # глобальные стили

Подключение компонентов UI:

<script>
  import Button from '@smui/button';
</script>

<Button variant="raised">Нажми меня</Button>

Для Tailwind-библиотек компонентов:

<div class="btn btn-primary">
  Кнопка
</div>

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

Подключение дополнительных настроек

Некоторые UI-библиотеки требуют:

  • Темизации (светлая/темная тема). Skeleton, например, использует переменные CSS и конфигурацию в svelte.config.js.
  • Иконки — отдельные пакеты типа @smui/icon-button или svelte-icons.
  • Анимации и интерактивность — можно подключать через Svelte transitions или встроенные классы Tailwind.

Пример включения темизации Skeleton:

// svelte.config.js
import { skeleton } from '@skeletonlabs/skeleton/vite-plugin';

export default {
  kit: {
    vite: {
      plugins: [skeleton({ theme: 'dark' })]
    }
  }
};

Проверка корректности установки

После установки и конфигурации UI-библиотеки важно протестировать её работу. Для этого достаточно создать тестовую страницу:

<script>
  import Button from '@smui/button';
</script>

<h1>Тест кнопки</h1>
<Button variant="raised">Проверка</Button>

Запуск проекта выполняется командой:

npm run dev -- --open

Если компонент отображается корректно и стили применяются, настройка завершена. В противном случае следует проверить:

  • Правильность импорта стилей
  • Конфигурацию svelte.config.js и TailwindCSS
  • Совместимость версий Node.js, SvelteKit и UI-библиотеки

Эти шаги обеспечивают стабильную основу для дальнейшего использования любых UI-библиотек в SvelteKit.

Оглавление