Vue Structure (Модульная архитектура)

⚠️ ВНИМАНИЕ! Приложение пакет находится в стадии рефакторинга. Некоторые функции могут работать нестабильно.

О проекте

Проект реализует модульную архитектуру на базе Vue 3, Vue Router, Pinia

🏗 Архитектурные принципы

Модульность

• Строгая изоляция - каждый модуль самодостаточен
• Нет глобальных views/stores - все в модулях
• Единая структура - все модули следуют одинаковой структуре
• Масштабируемость - легко добавлять новые модули

Типизация

• Полная типизация TypeScript
• Семантичные типы для всех компонентов
• Type safety на всех уровнях

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

src/
├── components/           # Переиспользуемые компоненты
│   ├── UserPanel.vue    # Панель пользователя
│   ├── AppNavigation.vue # Навигация
│   ├── Breadcrumbs.vue  # Хлебные крошки
│   └── AppContent.vue   # Основной контент
├── modules/             # Модули приложения
│   ├── base/           # Базовый модуль
│   ├── app/            # Модуль приложения
│   ├── hello/          # Модуль приветствия
│   └── counter/        # Модуль счетчика
├── base/               # Ядро приложения
│   ├── Application.ts  # Главный класс
│   ├── Context.ts      # Система контекста
│   ├── Module.ts       # Базовый класс модуля
│   └── StoreManager.ts # Менеджер Store
├── utils/              # Утилиты
├── types/              # TypeScript типы
└── config/             # Конфигурация

🚀 Быстрый старт

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

# Установка зависимостей
npm install

# Запуск в режиме разработки
npm run dev

# Сборка для продакшена
npm run build

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

# Unit тесты
npm run test:unit

# E2E тесты
npm run test:e2e

# Линтинг
npm run lint

📚 Факин докс (редко обновляется)

Подробная документация находится в папке docs/:

• Правила создания модулей - подробное руководство по созданию модулей
• Технические детали - технические аспекты миграции

🎯 Создание модуля

1. Создание структуры

mkdir src/modules/my-module
mkdir src/modules/my-module/views
mkdir src/modules/my-module/components

2. Базовые файлы

• index.ts - экспорт модуля
• routes.ts - маршруты модуля
• store.ts - stores модуля
• depends.ts - зависимости модуля

3. Регистрация модуля

Добавить в src/modules/index.js:

import myModule from "./my-module"
export default [base, app, hello, counter, myModule]

Основные компоненты (core)

Application

Главный класс приложения, управляющий инициализацией Vue, маршрутизацией и stores.

Context

Система контекста для внедрения зависимостей между модулями.

Module

Базовый класс для всех модулей приложения.

StoreManager

Менеджер для работы с абстрактной системой Store в модульной архитектуре.

Декомпозированные компоненты

• UserPanel - панель пользователя с авторизацией
• AppNavigation - навигационное меню
• Breadcrumbs - хлебные крошки
• AppContent - основной контент с роутингом

Примеры модулей

Простой модуль (base)

• Только маршруты
• Базовые зависимости

Модуль с store (hello)

• Маршруты
• Простой store
• Views

Полнофункциональный модуль (counter)

• Маршруты
• Store с состоянием
• Views и компоненты
• Зависимости

Ключевые особенности

• Модульная архитектура - каждый модуль изолирован и самодостаточен
• TypeScript - полная типизация на всех уровнях приложения
• Vue 3 Composition API - современный подход к разработке компонентов
• Абстрактная система Store - универсальное управление состоянием
• Context API - система внедрения зависимостей между модулями
• Декомпозированные компоненты - переиспользуемые UI элементы
• Умная навигация - с хлебными крошками и активными состояниями
• Масштабируемость - легко добавлять новые модули и функции
• Производительность - оптимизированная сборка с Vite

🚀 Преимущества архитектуры

Для разработчиков

• Быстрая разработка - модули можно разрабатывать независимо
• Легкое тестирование - каждый модуль тестируется изолированно
• Переиспользование - компоненты и логика легко переиспользуются
• Типобезопасность - TypeScript предотвращает ошибки на этапе разработки

Для проекта

• Масштабируемость - легко добавлять новые функции и модули
• Поддерживаемость - четкое разделение ответственности
• Производительность - оптимизированная загрузка и рендеринг
• Гибкость - возможность замены отдельных частей системы

🚫 Архитектурные ограничения

• Нет глобальных views - все views должны быть в модулях
• Нет глобальных stores - все stores должны быть в модулях
• Модульная изоляция - модули не должны напрямую обращаться друг к другу
• Context для взаимодействия - использование Context API для обмена данными

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

Frontend

• Vue 3 - современный фреймворк с Composition API
• TypeScript - строгая типизация на всех уровнях
• Vite - быстрая сборка и разработка
• CSS3 - современные стили без препроцессоров

State Management

• Абстрактная система Store - универсальное управление состоянием
• Совместимость с Pinia - возможность использования Pinia под капотом

Архитектура

• Модульная система - изолированные модули приложения
• Context API - система внедрения зависимостей
• Декомпозированные компоненты - переиспользуемые UI элементы

Лицензия