Фронтенд админ-панели

Краткое описание

Фронтенд админ-панели реализован на базе Nuxt 3 и использует Nuxt UI и Tailwind CSS как основной UI-стек. Проект построен с фокусом на переиспользуемость, единообразие и масштабируемость

Архитектурные особенности

• UI-стек: основан на Nuxt UI и Tailwind CSS, что обеспечивает визуальную целостность и гибкость кастомизации через app.config.ts и tailwind.config.ts.

• Компоненты: все общие UI-компоненты располагаются в components/common и используются повторно на различных страницах

• Разделение по воркспейсам: структура страниц организована в двух пространствах:

  • pages/global — страницы для управления сущностями глобального уровня (например, глобальные категории, глобальные товары и т.д.).
  • pages/site — страницы, специфичные для конкретных сайтов (локальные категории, товары и т.д.).

• Формы и CRUD: рендеринг форм реализован через унифицированный компонент BaseForm, которому передаются конфигурации из composables/forms/. Это позволяет легко создавать формы для различных сущностей, таких как товары, категории и т.д.

Технологический стек

• Nuxt 3 — основной фреймворк, работающий в режиме SSR
• Tailwind CSS — утилитарная CSS-система, кастомизируемая через tailwind.config.ts
• Nuxt UI (Nuxt UI) — библиотека компонентов с хорошей интеграцией в Nuxt-экосистему, кастомизируемая через app.config.ts

Разработка и запуск локально

1. Установка зависимостей

npm install

2. Сборка проекта

npm run build

3. Запуск в режиме разработки

npm run dev

4. Запуск в режиме продакшена

node .output/server/index.mjs

⚠️ Не забудь создать .env и .npmrc с актуальными значениями. См. Шаблоны окружений

Сборка и деплой

Проект деплоится вручную на staging-сервер. Подробнее см. Сборка и деплой фронтендов

Навигация

• Структура проекта
• Компоненты админ-панели
• Composables функции
• Утилиты