0Pricing
Sveltejs Academy · Урок

Структура проекта: src routes static

Изучите структуру каталогов проекта SvelteKit и назначение каждой папки

«Структура проекта: src routes static» — бесплатный урок Sveltejs Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Sveltejs Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Sveltejs Academy содержит 4 уроков всего.

Основные каталоги

Проект SvelteKit содержит следующие основные каталоги: src/, static/ и файлы конфигурации в корне.

Каталог src

src/ содержит весь код приложения: маршруты, компоненты, код библиотек и точку входа приложения.

Каталог src/routes

Каждый подкаталог src/routes соответствует URL. Файл +page.svelte в каталоге определяет содержимое, отображаемое по этому пути.

Пример маршрута

Путь src/routes/about/+page.svelte отображается в браузере по адресу /about.

src/routes/
  +page.svelte         -> /
  about/+page.svelte   -> /about
  blog/[slug]/+page.svelte -> /blog/:slug

Каталог src/lib

src/lib предназначен для общих модулей и компонентов. Импортируйте их с помощью псевдонима $lib.

import Button from "$lib/Button.svelte";

Каталог static

Файлы в static/ раздаются без изменений из корня URL. Используйте этот каталог для favicon.png, robots.txt и других необработанных ресурсов.

Файлы конфигурации

В корне находятся svelte.config.js, vite.config.js, package.json и, при необходимости, tsconfig.json.

svelte.config.js

Определяет препроцессоры, адаптер и параметры уровня комплекта. Адаптер определяет способ сборки приложения для развёртывания.

import adapter from "@sveltejs/adapter-auto";
export default { kit: { adapter: adapter() } };

vite.config.js

Настраивает Vite — лежащий в основе сборщик. Здесь можно добавлять плагины, псевдонимы, правила прокси-сервера и параметры сборки.

Файл app.html

src/app.html — это HTML-оболочка, окружающая каждую страницу. Заполнители вроде %sveltekit.head% подставляются на этапе сборки.

Файл хуков

src/hooks.server.js позволяет перехватывать запросы на сервере. Хуки будут рассмотрены в следующем курсе.

Быстрая проверка

Где находится файл маршрута страницы SvelteKit?

Итоги

Теперь Вы знаете структуру проекта: в src находится код, в routes — страницы, в lib — общий код, а в static — необработанные ресурсы.

Часто задаваемые вопросы

Урок «Структура проекта: src routes static» бесплатный?

Да — полный текст урока «Структура проекта: src routes static» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Sveltejs Academy, подпишись на CoddyKit PRO. Курс Sveltejs Academy содержит 4 уроков всего.

Чему я научусь в уроке «Структура проекта: src routes static»?

Изучите структуру каталогов проекта SvelteKit и назначение каждой папки Ты практикуешь Sveltejs Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Sveltejs Academy?

Предыдущий опыт не требуется. Sveltejs Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Структура проекта: src routes static»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Sveltejs Academy?

Да. Каждый урок Sveltejs Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Что такое Svelte и зачем он компилируется
  2. Создание проекта с помощью npm create svelte
  3. Структура проекта: src routes static
  4. Сервер разработки и горячая замена модулей
← Назад к Sveltejs Academy