Задание: вёрстка компонентов в проекте OnlinePizza

Приступаем к созданию базовой структуры приложения. В этом задании вы создадите компоненты-обёртки (layout) и главную страницу, применяя на практике знания об однофайловых компонентах Vue.

Шаг 1. Создайте компонент шапки

Создайте файл src/layouts/AppHeader.vue.

В блоке <template> реализуйте шапку приложения, используя семантическую HTML-разметку:

Оберните всё содержимое в тег <header>
Добавьте логотип — текст "OnlinePizza" (используйте тег <a> или <span> с классом для стилизации)
Добавьте навигацию в теге <nav>, внутри которого разместите список <ul> с элементами <li>:
- Главная
- Корзина
- Профиль
Добавьте кнопку входа/выхода ("Войти") — пока просто кнопка без логики

Навигационные ссылки пока сделайте обычными тегами <a> с href="#" — маршрутизацию мы подключим позже.

Шаг 2. Создайте компонент лейаута

Создайте файл src/layouts/AppLayout.vue.

Этот компонент — обёртка для страниц с шапкой. В нём:

Импортируйте и подключите AppHeader
Разместите AppHeader в верхней части шаблона
Ниже добавьте тег <main>, внутри которого разместите <slot> — через него будет подставляться содержимое конкретной страницы

Шаг 3. Создайте главную страницу

Создайте файл src/views/HomeView.vue.

Пока это будет простая заглушка:

Добавьте заголовок <h1> с текстом "Конструктор пиццы"
Можно добавить краткий текст-пояснение под заголовком: "Собери свою пиццу"

Шаг 4. Подключите всё в App.vue

Откройте файл src/App.vue. Очистите его стандартное содержимое и:

Импортируйте компонент AppLayout
Импортируйте компонент HomeView
В шаблоне разместите AppLayout, а внутри него — HomeView

Таким образом, AppLayout обернёт содержимое страницы, а HomeView подставится в слот <main>.

Проверка

Запустите проект командой npm run dev и откройте его в браузере. Убедитесь, что:

В верхней части страницы отображается шапка с логотипом "OnlinePizza" и навигационными ссылками
Под шапкой отображается заголовок "Конструктор пиццы"
Структура страницы логична: шапка сверху, контент ниже