Проєктування та розробка веб-застосунків

Мета

• Розгорнути проєкт на Vite + Vue 3 (Composition API).

• Зробити SPA з маршрутизацією (Vue Router) та спільним Layout.

• Організувати зрозумілу структуру компонентів і навігацію без перезавантаження сторінки.

Результат після виконання

Працюючий SPA з мінімум 3 сторінками:

1. Home — короткий опис застосунку.

2. Catalog/List — список елементів (наприклад, статті/замітки/проєкти), отриманих або зі статичного JSON-файлу в /public/data.json, або як константа в модулі.

3. Details — сторінка детального перегляду елемента за маршрутом /items/:id (без редагування).

Без форм: пошуку/фільтрів/створення немає. Тільки перегляд.

Вимоги до реалізації

1) Ініціалізація

• Node.js LTS встановлено.

• Git: нова гілка lab-spa-vue.

• Старт:

  npm create vite@latest my-spa -- --template vue
  cd my-spa
  npm i
  npm i vue-router
  

2) Структура проєкту (рекомендована)

src/
  components/
    AppHeader.vue
    AppFooter.vue
  layouts/
    MainLayout.vue        // хедер, меню, <router-view/>, футер
  pages/
    HomePage.vue
    ItemsListPage.vue
    ItemDetailsPage.vue
  router/
    index.js
App.vue
main.js

3) Маршрутизація

• Налаштувати маршрути в router/index.js:

  • / → HomePage

  • /items → ItemsListPage

• Навігаційне меню з <router-link> у AppHeader.vue або MainLayout.vue.

4) Якість і збірка

• Скрипти у package.json: dev, build, preview.

• Перевірити npm run build і npm run preview.

• Охайна верстка, акуратно розкладені файли, зрозумілі імена.

5) Git та README

• Розробка в гілці lab-spa-vue, далі merge у main.

• README.md: як запустити (npm i, npm run dev), короткий опис сторінок, скріншоти.

Що здати

1. Посилання на репозиторій (GitHub/GitLab).

2. Робочий SPA з 3 сторінками (Home/List/Details), навігацією

3. README.md + 2–3 скріншоти (головна, список, деталі).