Skip to content

architecture.md

Latest commit

 

History

History
230 lines (183 loc) · 7.81 KB

architecture.md

File metadata and controls

230 lines (183 loc) · 7.81 KB

Архитектура проекта

Обзор архитектуры

Nuxt 3 Starter Kit построен на принципах модульной архитектуры с четким разделением ответственности. Проект следует лучшим практикам Vue 3 и Nuxt 3 для создания масштабируемых приложений.

🏗 Структура проекта

Основные директории

/app

Конфигурация приложения Nuxt 3

  • router.options.ts - Настройки роутинга

/assets

Статические ресурсы и стили

  • /css/global.css - Глобальные CSS стили
  • /scss/components/ - SCSS стили для компонентов

/components

Vue компоненты, организованные по категориям

/ui - Базовые UI компоненты

  • AppButton.vue - Кнопки с различными типами и размерами
  • AppDialog.vue - Модальные окна
  • AppDropdown.vue - Выпадающие меню
  • AppIcon.vue - Иконки

/form - Компоненты для работы с формами

  • AppForm.vue - Основной компонент формы
  • AppFormInputText.vue - Текстовые поля
  • AppFormInputPassword.vue - Поля паролей
  • AppFormSelect.vue - Селекты
  • AppFormMultiSelect.vue - Множественный выбор
  • AppFormFile.vue - Загрузка файлов
  • AppFormTextarea.vue - Многострочные поля
  • FormField.vue - Обертка для полей формы
  • FormContainer.vue - Контейнер формы

/client - Клиентские компоненты

  • AppLoader.vue - Индикаторы загрузки

/composable

Composable функции для переиспользования логики

  • api.ts - Функции для работы с API

/layouts

Макеты страниц

  • default.vue - Основной макет
  • auth.vue - Макет для страниц аутентификации

/pages

Страницы приложения (автоматическая маршрутизация Nuxt)

  • /auth/ - Страницы аутентификации
    • /login/ - Вход в систему
    • /register/ - Регистрация

/stores

Pinia stores для управления состоянием

  • auth.ts - Store для аутентификации
  • main.ts - Основной store

/types

TypeScript типы и интерфейсы

  • api.ts - Типы для API
  • auth.ts - Типы аутентификации
  • form.ts - Типы форм
  • helpers.ts - Вспомогательные типы
  • router.ts - Типы роутинга

/utils

Утилитарные функции

  • helpers.ts - Общие вспомогательные функции

🔧 Принципы архитектуры

1. Компонентный подход

  • Каждый компонент имеет единственную ответственность
  • Компоненты переиспользуемы и типизированы
  • Четкое разделение между UI и бизнес-логикой

2. TypeScript First

  • Все компоненты и функции типизированы
  • Строгая типизация для API и форм
  • Автодополнение и проверка типов

3. Composable Pattern

  • Логика вынесена в composable функции
  • Переиспользование кода между компонентами
  • Легкое тестирование

4. Store Pattern (Pinia)

  • Централизованное управление состоянием
  • Типизированные stores
  • Реактивность и devtools

5. Form Architecture

  • Декларативное описание форм
  • Встроенная валидация
  • Типизированные поля

📦 Зависимости

Основные зависимости

{
  "nuxt": "^3.13.0",
  "vue": "latest",
  "primevue": "^4.0.7",
  "pinia": "^2.2.2",
  "firebase": "^10.13.2"
}

Dev зависимости

{
  "typescript": "latest",
  "tailwindcss": "^3.4.12",
  "autoprefixer": "^10.4.20"
}

🔄 Жизненный цикл приложения

Инициализация

  1. Загрузка конфигурации Nuxt
  2. Инициализация PrimeVue с темой Aura
  3. Подключение Tailwind CSS
  4. Регистрация глобальных компонентов

Аутентификация

  1. Проверка токена в localStorage
  2. Валидация токена через API
  3. Загрузка данных пользователя
  4. Обновление состояния в store

Роутинг

  1. Автоматическая генерация маршрутов из /pages
  2. Middleware для проверки аутентификации
  3. Layout switching в зависимости от маршрута

🎯 Паттерны проектирования

1. Factory Pattern

Используется в формах для создания компонентов полей:

const getFieldComponent = (type: FormFieldType) => {
  switch (type) {
    case FormFieldType.TEXT:
      return AppFormInputText;
    // ...
  }
};

2. Observer Pattern

Реализован через Vue 3 reactivity и Pinia stores:

watch(accessToken, (newToken) => {
  isAuthenticated.value = !!newToken;
});

3. Strategy Pattern

Используется для валидации форм:

const validationRules = {
  [ValidationRuleType.REQUIRED]: (value: any) => !!value || 'Required',
  [ValidationRuleType.EMAIL]: (value: string) => /\S+@\S+\.\S+/.test(value) || 'Invalid email',
};

🔒 Безопасность

Аутентификация

  • JWT токены для аутентификации
  • Автоматическое обновление токенов
  • Защищенные маршруты

Валидация

  • Клиентская валидация форм
  • Серверная валидация API
  • Санитизация данных

📈 Масштабируемость

Модульная структура

  • Легкое добавление новых компонентов
  • Расширение типов и интерфейсов
  • Подключение новых stores

Производительность

  • Ленивая загрузка компонентов
  • Оптимизация изображений
  • Кэширование API запросов

🧪 Тестирование

Рекомендуемая структура тестов

tests/
├── unit/
│   ├── components/
│   ├── composables/
│   └── stores/
├── integration/
└── e2e/

Инструменты

  • Vitest для unit тестов
  • Vue Test Utils для тестирования компонентов
  • Playwright для e2e тестов

📚 Документация

Компоненты

  • JSDoc комментарии для всех компонентов
  • Примеры использования
  • Описание props и events

API

  • Типизированные интерфейсы
  • Описание endpoints
  • Примеры запросов

Эта архитектура обеспечивает гибкость, масштабируемость и поддерживаемость кода, следуя современным стандартам разработки Vue 3 приложений.