I AM

Установка и настройка проекта OnlinePizza

В этом уроке мы создадим и настроим проект OnlinePizza — приложение для заказа пиццы с конструктором. Этот проект вы будете развивать на протяжении всего курса, постепенно добавляя новую функциональность.

Шаг 1. Создание проекта

Создайте новый Vue-проект с помощью Vite. Откройте терминал и выполните команду:

npm create vue@latest online-pizza

При создании проекта выберите следующие опции:

  • TypeScript — на ваше усмотрение (рекомендуется «No» для упрощения)
  • JSX — No
  • Vue Router — Yes (пригодится в следующих модулях)
  • Pinia — Yes (пригодится для управления состоянием)
  • Vitest — No (добавим позже)
  • ESLint — Yes
  • Prettier — Yes

После создания перейдите в директорию проекта и установите зависимости:

cd online-pizza
npm install

Убедитесь, что проект запускается:

npm run dev

В браузере по адресу http://localhost:5173 должна появиться стартовая страница Vue.

Шаг 2. Структура проекта

Удалите стандартное содержимое, созданное при инициализации: очистите файл src/App.vue, удалите содержимое папки src/components, удалите стандартные стили из src/assets.

Создайте следующие директории внутри src/:

  • src/layouts/ — компоненты-обёртки для страниц (шапка, подвал, общая структура)
  • src/views/ — компоненты страниц приложения
  • src/modules/ — модули приложения (конструктор, корзина и др.), каждый со своими компонентами
  • src/common/ — переиспользуемые компоненты, утилиты, общие для всего приложения
  • src/assets/ — статические ресурсы: стили, изображения, шрифты
  • src/mocks/ — файлы с моковыми данными для разработки без сервера
  • src/services/ — модули для работы с API (будут использоваться позже)
  • src/stores/ — хранилища Pinia (будут использоваться позже)

Такая структура поможет организовать код по функциональным областям и упростит навигацию по проекту по мере его роста.

Шаг 3. Запуск бэкенда через Docker

В качестве бэкенда мы используем json-server — простой REST API на основе JSON-файла. Бэкенд запускается через Docker, чтобы не устанавливать зависимости глобально.

Склонируйте репозиторий с бэкендом в удобное место (не внутрь вашего Vue-проекта):

git clone https://github.com/EnderWarik/vue-course-backend.git
cd vue-course-backend

Запустите API одной командой:

docker-compose up

Docker соберёт образ с json-server и запустит его. API будет доступен по адресу http://localhost:3000.

Убедитесь, что сервер работает: откройте в браузере http://localhost:3000/dough — вы увидите JSON-массив с типами теста.

Что внутри

Все данные хранятся в файле db.json, который монтируется как volume. Это значит, что изменения через API (создание заказов, добавление адресов) сохраняются между перезапусками контейнера.

Структура данных:

  • dough — виды теста (тонкое и толстое), каждый с ценой
  • sizes — размеры пиццы (23 см, 32 см, 45 см) с множителем цены
  • sauces — соусы (томатный, сливочный, острый) с ценой
  • ingredients — 15 ингредиентов с ценой и категорией (cheese, meat, vegetable)
  • extras — дополнительные товары (напитки, закуски)
  • orders — массив заказов (изначально пустой)
  • addresses — адреса доставки (изначально пустой)
  • users — пользователи системы

Доступные эндпоинты

| Метод | URL | Описание | |-------|-----|----------| | GET | /dough | Типы теста | | GET | /sizes | Размеры пиццы | | GET | /sauces | Соусы | | GET | /ingredients | Ингредиенты | | GET | /extras | Дополнительные товары | | GET, POST | /orders | Заказы | | GET, POST, PUT | /addresses | Адреса доставки | | GET | /users | Пользователи |

json-server автоматически поддерживает фильтрацию через query-параметры (например, GET /users?email=user@example.com), пагинацию и сортировку.

Шаг 4. Настройка Vite-прокси

Чтобы фронтенд-приложение могло обращаться к бэкенду без проблем с CORS, настройте проксирование запросов.

Откройте файл vite.config.js (или vite.config.ts) и добавьте настройку server.proxy. Все запросы, начинающиеся с /api, будут перенаправляться на http://localhost:3000, при этом префикс /api будет убираться из пути. Это значит, что запрос с фронтенда на /api/dough превратится в запрос к http://localhost:3000/dough.

Параметр changeOrigin установите в true, а в rewrite уберите префикс /api из пути запроса.

После настройки прокси вы сможете делать запросы к API, используя относительные пути вида /api/dough, /api/ingredients и т.д.

Шаг 5. Тестовые учётные данные

В базе данных уже создан тестовый пользователь. Для входа в систему (когда мы реализуем авторизацию) используйте следующие данные:

email: user@example.com
password: password123

Запомните или запишите эти данные — они понадобятся при работе над страницей авторизации в следующих модулях.

Итог

На этом этапе у вас должен быть:

  • Рабочий Vue-проект, запускающийся через npm run dev
  • Подготовленная структура директорий
  • Работающий json-server в Docker-контейнере, запущенный через docker-compose up
  • Настроенный прокси в Vite для обращения к API

В следующих заданиях мы начнём наполнять проект компонентами и функциональностью.

НазадДалее