Vue 3 + TypeScript проект-шаблон для разработки интернет-магазина.
- Vue 3 — фреймворк с Composition API
- TypeScript — типизация, проверка через
vue-tsc - Vite — сборка, dev-сервер с HMR
- Tailwind CSS v4 — утилитарные CSS-классы (нативный плагин для Vite)
- Panda CSS — codegen для стилизации компонентов (styled-system)
- PrimeVue — UI-компоненты (unstyled-режим, стилизация через pass-through)
- Pinia — глобальное состояние (
src/stores/) - Pinia Colada — серверный кеш и data-fetching поверх Pinia
- Vue Router — клиентская маршрутизация (
src/router/) - VueUse — коллекция Vue-компоузублов
- Valibot — легковесная валидация схем (формы, API-данные)
- VeeValidate — форма-валидация для Vue-компонентов
- Vitest — unit-тесты (
src/**/__tests__/) - Playwright — e2e-тесты в Chromium, Firefox, Safari (
e2e/**) - jsdom — окружение для unit-тестов
- Oxlint — быстрый линтер, конфигурация в
.oxlintrc.json - ESLint — расширенный линтинг (Vue, TypeScript, Vitest, Playwright правила)
- Oxfmt — форматирование кода, интеграция с ESLint для
attributes-order - eslint-config-prettier — отключение конфликтующих правил
src/
components/ — переиспользуемые компоненты
ProductCard/ — карточка товара (+ стили через Panda CSS)
ProductList/ — список товаров
pages/ — страницы-роуты
products/ — ProductsPage, ProductPage
stores/ — Pinia-сторы
router/ — Vue Router конфигурация
styles/ — глобальные стили и тема PrimeVue
__tests__/ — unit-тесты
e2e/ — e2e-тесты Playwright
styled-system/ — автогенерация Panda CSS (не коммитить)
npm install # установка зависимостей
npm run prepare # panda codegen (запускается после install)
npm run dev # dev-сервер с HMR
npm run build # type-check + продакшн-сборка
npm run preview # предпросмотр собранного бандла
npm run test:unit # unit-тесты (Vitest)
npm run test:e2e # e2e-тесты (Playwright)
npm run lint # oxlint + eslint с autofix
npm run format # форматирование (oxfmt)
npm run type-check # проверка типов (vue-tsc)- VS Code + Volar (отключите Vetur)
- Браузер: Vue.js devtools
Требуется ^22.18.0 || >=24.12.0.