Vue.js Демо - Максимум возможностей

Полноценное демо приложение, демонстрирующее все основные возможности Vue.js 3 с TypeScript.

🚀 Возможности

⚡ Реактивность

• ref() - для примитивных значений
• reactive() - для объектов
• computed() - вычисляемые свойства
• watch() и watchEffect() - отслеживание изменений
• toRefs() - деструктуризация реактивных объектов

🎯 Директивы

• v-if, v-else-if, v-else - условный рендеринг
• v-show - показ/скрытие элементов
• v-for - циклы
• v-model - двусторонняя привязка данных
• v-on - обработка событий
• v-bind - привязка атрибутов
• Кастомные директивы

🎪 Слоты

• Обычные слоты
• Именованные слоты
• Scoped слоты
• Динамические слоты
• provide/inject - передача данных через иерархию
• Teleport - рендеринг в другом месте DOM

✨ Анимации

• CSS переходы
• JavaScript хуки анимации
• Группы переходов
• Анимации списков
• Фильтрация с анимацией

🧩 Composition API

• Переиспользуемые composables
• useCounter - работа со счетчиками
• useLocalStorage - синхронизация с localStorage
• useFetch - HTTP запросы
• useTimer - управление таймерами
• useMouse - отслеживание мыши
• useDebounce - задержка выполнения
• useToggle - переключение состояний

🏪 Управление состоянием (Pinia)

• User Store - управление пользователями
• Product Store - каталог товаров и корзина
• Todo Store - управление задачами
• Notification Store - система уведомлений
• Взаимодействие между store

🛠️ Технологии

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

📦 Установка и запуск

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

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

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

# Предварительный просмотр сборки
yarn preview

# Проверка типов
yarn type-check

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

src/
├── components/          # Компоненты
│   └── slots/          # Компоненты для демонстрации слотов
├── composables/        # Переиспользуемая логика
├── stores/            # Pinia stores
├── views/             # Страницы приложения
├── types/             # TypeScript типы
├── mocks/             # Моки данных
├── assets/            # Статические ресурсы
├── App.vue            # Главный компонент
├── main.ts            # Точка входа
└── style.css          # Глобальные стили

🎨 Особенности дизайна

• Современный и адаптивный дизайн
• Градиентные фоны
• Плавные анимации и переходы
• Интуитивная навигация
• Мобильная адаптация

📱 Страницы

1. Главная - обзор всех возможностей
2. Реактивность - демонстрация реактивной системы
3. Директивы - все встроенные директивы Vue
4. Слоты - система слотов и композиция
5. Анимации - переходы и анимации
6. Composition API - composables и логика
7. Store - управление состоянием

🔧 Настройка

Проект настроен для работы с:

• TypeScript строгой типизацией
• ESLint для качества кода
• Vite для быстрой разработки
• Hot Module Replacement (HMR)

📚 Изучение

Этот проект идеально подходит для:

• Изучения Vue 3 с нуля
• Понимания Composition API
• Работы с TypeScript в Vue
• Изучения современных паттернов разработки
• Демонстрации возможностей Vue.js

🤝 Вклад

Проект создан для демонстрации возможностей Vue.js. Если у вас есть предложения по улучшению или добавлению новых примеров, создавайте issues или pull requests.

📄 Лицензия

MIT License - используйте свободно для обучения и демонстрации.