Создание проекта

Проект Svelte создаёт официальная утилита sv. Она собирает готовую заготовку SvelteKit: настройки сборки, первую страницу и команды для запуска. Нужен только установленный Node.js версии 20 или новее.

Создание

npx sv create todo-app

Утилита задаст несколько вопросов. Для курса подойдут такие ответы:

Дополнения вроде Prettier, ESLint или Vitest можно добавить позже командой npx sv add.

Запуск

cd todo-app
npm run dev

В терминале появится адрес http://localhost:5173. Откройте его — вы увидите заголовок «Welcome to SvelteKit». Сервер разработки следит за файлами: сохраните изменения, и страница обновится без перезагрузки.

Что внутри

todo-app/
├── src/
│   ├── lib/              общий код и компоненты
│   ├── routes/
│   │   └── +page.svelte  главная страница сайта
│   └── app.html          HTML-шаблон всех страниц
├── static/               файлы, которые отдаются как есть
├── package.json
├── svelte.config.js      настройки Svelte и SvelteKit
└── vite.config.js        настройки сборщика Vite

Главное для начала — папки src/routes и src/lib. Каждый файл +page.svelte в src/routes — это страница сайта. В src/lib кладут компоненты и модули, которые используются в разных местах.

Первая правка

Откройте src/routes/+page.svelte и замените содержимое:

<!-- src/routes/+page.svelte -->
<h1>Мои задачи</h1>
<p>Пока список пуст.</p>

После сохранения на http://localhost:5173 появятся заголовок и строка текста. Этот файл станет домом для списка задач в следующих уроках.

Псевдоним $lib

Чтобы не писать длинные относительные пути вроде ../../lib/components/TodoItem.svelte, SvelteKit даёт псевдоним $lib — он указывает на папку src/lib:

// src/routes/+page.svelte (внутри блока script)
import TodoItem from '$lib/components/TodoItem.svelte';

Папку src/lib/components создайте сами, когда понадобится первый компонент.

Команды проекта

Частая ошибка

Создать файл страницы без знака плюс — например, src/routes/page.svelte. SvelteKit такие файлы не считает страницами, и адрес вернёт 404. Служебные файлы маршрутов всегда начинаются с +: +page.svelte, +layout.svelte, +page.server.js.