Фронтенд на SvelteKit

Этот раздел описывает ключевые паттерны проекта и шаги по добавлению новых страниц и компонентов.

Структура проекта

Фронтенд расположен в каталоге src/ и использует SvelteKit. Основные элементы:

• routes/ — дерево страниц приложения.
• Папки и файлы в routes/ определяют URL‑маршруты.
• Файл +page.svelte описывает компонент страницы.
• Файл +page.ts или +page.server.ts содержит логику загрузки данных.
• (app) — сегмент группы маршрутов для основной части приложения. Он скрыт из URL и помогает структурировать код.
• Динамические маршруты
• Названия папок в квадратных скобках ([id]) соответствуют параметрам URL: /items/[id] → /items/42.
• Папки вида [...slug] обрабатывают оставшуюся часть пути.
• lib/ — общие модули приложения:
• lib/apis — функции работы с API.
• lib/stores — Svelte‑stores для хранения состояния.
• lib/utils — утилиты и вспомогательные функции.
• lib/workers — web‑workers и связанные скрипты.

Создание нового маршрута

1. В каталоге src/routes/ создайте папку с названием будущего URL.
2. Добавьте файл +page.svelte с разметкой страницы.
3. При необходимости создайте +page.ts для загрузки данных: ts // src/routes/example/+page.ts export const load = async () => { return { message: 'Hello' }; };
4. Для вложенных страниц используйте подпапки или (app) группы.

Создание нового компонента

1. Разместите компонент в соответствующем месте, обычно в src/lib/.
2. Имя файла должно быть в формате Component.svelte.
3. Импортируйте компонент в нужную страницу: ```svelte
   

`` 4. Если компонент требует состояния, создайте store вlib/stores` и подключите его внутри компонента.

Следуя этим правилам, структура фронтенда останется предсказуемой и удобной для развития.