Современный интернет-магазин, построенный на Nuxt 3 с использованием Quasar UI и SCSS.
- Nuxt 3 - Vue.js фреймворк
- Quasar - UI компонентная библиотека
- SCSS - CSS препроцессор
- TypeScript - типизация
- Pinia - управление состоянием
- Tailwind CSS - утилитарные CSS классы
shamanri/
├── app/ # Основная директория приложения
│ ├── app.vue # Главный компонент приложения
│ ├── assets/ # Статические ресурсы (стили, изображения)
│ │ └── main.scss # Основные SCSS стили и переменные
│ ├── layouts/ # Макеты страниц
│ ├── pages/ # Страницы (роутинг)
│ ├── plugins/ # Плагины (Quasar, etc.)
│ ├── stores/ # Pinia stores
│ ├── types/ # TypeScript типы
│ ├── utils/ # Утилиты
│ ├── composables/ # Композаблы
│ ├── middleware/ # Промежуточное ПО
│ └── modules/ # Модули по страницам
│ ├── main/ # Главная страница
│ │ └── MainPage.vue # Компонент главной страницы
│ └── shared/ # Общие компоненты
│ ├── components/ # Переиспользуемые компоненты
│ │ └── ProductCard.vue
│ └── kit/ # Низкоуровневые компоненты
│ └── Button.vue
├── public/ # Публичные файлы
├── server/ # Серверные API
├── content/ # Контент (Markdown, JSON)
├── v1/ # Старые файлы проекта
├── nuxt.config.ts # Конфигурация Nuxt
├── package.json # Зависимости
└── README.md # Документация
Проект использует модульную архитектуру:
- main/ - Главная страница и её компоненты
- catalog/ - Каталог товаров (будущий модуль)
- product/ - Страница товара (будущий модуль)
- shared/ - Общие компоненты и утилиты
- components/ - Переиспользуемые компоненты (ProductCard, Header, Footer)
- kit/ - Низкоуровневые компоненты (Button, Input, Modal)
- pages/ - Роутинг Nuxt, импортирует компоненты из модулей
- SCSS с современными функциями (
@use,color.adjust,map.get) - Переменные для цветов, шрифтов, размеров
- Миксины для повторяющихся стилей
- Responsive дизайн с медиа-запросами
# Разработка
npm run dev
# Сборка для продакшена
npm run build
# Генерация статического сайта
npm run generate
# Предварительный просмотр
npm run preview# Установка зависимостей
npm install
# Запуск сервера разработки
npm run devСайт будет доступен по адресу: http://localhost:3000
После генерации статического сайта (npm run generate), загрузите содержимое папки .output/public/ на любой статический хостинг.
Проект настроен на автоматический деплой через GitHub Actions:
Настройка:
- Зайдите в репозиторий → Settings → Pages
- В разделе Source выберите: GitHub Actions
- При push в
mainсайт автоматически соберется и задеплоится
Кастомный домен:
- Файл
CNAMEвpublic/автоматически копируется при сборке - В GitHub Pages укажите домен:
shamanri.art
MIT License