Учебник Quasar

Введение в Quasar Framework
- Что такое Quasar и зачем он нужен
- История развития фреймворка
- Философия и архитектура Quasar
- Сравнение с другими Vue-фреймворками
- Системные требования и совместимость
Установка и настройка окружения
- Установка Node.js и npm
- Глобальная установка Quasar CLI
- Создание нового проекта
- Структура директорий проекта
- Конфигурационные файлы quasar.config.js
- Переменные окружения
- Настройка IDE для работы с Quasar
Основы работы с Quasar CLI
- Команды разработки и сборки
- Режимы разработки (SPA, SSR, PWA, Mobile, Electron)
- Горячая перезагрузка модулей
- Инспектор Webpack конфигурации
- Создание собственных команд CLI
Работа с компонентами Vue в Quasar
- Структура Vue-компонента в Quasar
- Composition API в контексте Quasar
- Options API и его использование
- Жизненный цикл компонентов
- Реактивность и refs
- Computed свойства и watchers
- Slots и scoped slots
Система компонентов Quasar
- Обзор библиотеки компонентов
- Импорт и регистрация компонентов
- Глобальные и локальные компоненты
- Автоматический импорт компонентов
- Tree-shaking компонентов
Layout и навигация
- QLayout и его роли
- QHeader и QFooter
- QDrawer для боковых панелей
- QPageContainer и QPage
- Структура многостраничного приложения
- Навигация между страницами
- Динамические layouts
Компоненты форм
- QInput для текстовых полей
- QSelect для выпадающих списков
- QCheckbox и QRadio
- QToggle переключатели
- QSlider и QRange
- QDate и QTime пикеры
- QFile для загрузки файлов
- QEditor богатый текстовый редактор
- QRating компонент оценки
Валидация форм
- Встроенные правила валидации
- Создание пользовательских правил
- Валидация на уровне формы
- Асинхронная валидация
- Отображение ошибок валидации
- Интеграция с Vuelidate и VeeValidate
Кнопки и действия
- QBtn основной компонент кнопок
- Типы и стили кнопок
- QBtnGroup группировка кнопок
- QBtnDropdown выпадающие меню
- QBtnToggle переключаемые кнопки
- QFab плавающие кнопки действий
- Иконки в кнопках
Таблицы и списки
- QTable компонент таблиц
- Конфигурация колонок
- Сортировка и фильтрация
- Пагинация таблиц
- Выбор строк
- Виртуальный скроллинг в таблицах
- QList и QItem для списков
- QTree древовидные структуры
- QTimeline компонент временной шкалы
Диалоги и уведомления
- QDialog модальные окна
- Программное управление диалогами
- Confirm и Prompt диалоги
- QNotify система уведомлений
- Настройка позиции и анимации
- QTooltip всплывающие подсказки
- QMenu контекстные меню
- QPopupProxy универсальные попапы
Навигационные компоненты
- QTabs вкладки
- QTab и QTabPanel
- Вертикальные и горизонтальные вкладки
- QBreadcrumbs хлебные крошки
- QPagination пагинация
- QStepper пошаговые формы
- QCarousel карусели
Отображение данных
- QCard карточки
- QChip чипсы и теги
- QBadge бейджи
- QBanner баннеры
- QMarkup отображение разметки
- QCircularProgress круговые индикаторы
- QLinearProgress линейные индикаторы
- QSkeleton заглушки загрузки
- QSpinner спиннеры
Медиа компоненты
- QImg работа с изображениями
- Ленивая загрузка изображений
- QVideo видео плеер
- QAvatar аватары
- QIcon система иконок
- Интеграция с Material Icons
- Font Awesome и другие наборы иконов
- SVG иконки
Утилитарные компоненты
- QScrollArea настраиваемый скролл
- QVirtualScroll виртуализация списков
- QIntersection отслеживание видимости
- QResizeObserver отслеживание размеров
- QNoSsr контроль серверного рендеринга
- QAjaxBar индикатор загрузки
Система стилизации
- CSS переменные в Quasar
- Quasar SASS/SCSS переменные
- Переопределение стилей компонентов
- Создание пользовательских тем
- Brand colors и их настройка
- Типографика
- Анимации и transitions
Директивы Quasar
- v-ripple эффект волны
- v-touch-pan жесты панорамирования
- v-touch-swipe свайпы
- v-touch-hold длительное нажатие
- v-touch-repeat повторяющиеся нажатия
- v-scroll-fire триггер при скролле
- v-intersection-observer наблюдение за видимостью
- v-close-popup закрытие попапов
- Создание пользовательских директив
Плагины Quasar
- Регистрация и настройка плагинов
- Dialog плагин
- Loading плагин
- LoadingBar плагин
- Notify плагин
- BottomSheet плагин
- LocalStorage и SessionStorage
- Cookies плагин
- AppFullscreen
- AppVisibility
Утилиты и хелперы
- colors утилиты для работы с цветом
- date работа с датами
- scroll управление прокруткой
- dom манипуляции с DOM
- format форматирование данных
- debounce и throttle
- uid генерация уникальных идентификаторов
- event управление событиями
Маршрутизация с Vue Router
- Интеграция Vue Router в Quasar
- Определение маршрутов
- Вложенные маршруты
- Динамические параметры
- Navigation guards
- Lazy loading маршрутов
- Мета-информация маршрутов
- Программная навигация
Управление состоянием с Pinia
- Интеграция Pinia в Quasar проект
- Создание stores
- State, getters и actions
- Композиция stores
- Плагины для Pinia
- Персистентность состояния
- DevTools и отладка
Работа с API и HTTP
- Интеграция Axios в Quasar
- Настройка boot файлов для API
- Создание API клиента
- Interceptors для запросов и ответов
- Отмена запросов
- Кеширование запросов
Интернационализация (i18n)
- Настройка Vue I18n
- Структура файлов локализации
- Переключение языков
- Форматирование чисел и дат
- Плюрализация
- Lazy loading локалей
- RTL поддержка
Адаптивный дизайн
- Система брейкпоинтов Quasar
- Screen плагин
- Адаптивные классы
- Visibility классы
- Flexbox утилиты
- Grid система
- Создание адаптивных layouts
Темизация и кастомизация
- Light и Dark режимы
- Переключение тем
- CSS переменные для тем
- SASS переменные темизации
- Создание собственных цветовых схем
- Адаптивная темизация
- Персистентность выбора темы
Single Page Application (SPA)
- Особенности SPA режима
- Настройка роутинга для SPA
- SEO оптимизация SPA
- Prerendering для SPA
- Деплой SPA приложений
Server Side Rendering (SSR)
- Концепция SSR в Quasar
- Настройка SSR режима
- Жизненный цикл SSR
- Изоморфный код
- preFetch и serverPrefetch
- State transfer между сервером и клиентом
- Кеширование на сервере
- Деплой SSR приложений
Progressive Web App (PWA)
- Что такое PWA и его преимущества
- Настройка PWA режима
- Service Worker конфигурация
- Стратегии кеширования
- Манифест приложения
- Иконки и splash screens
- Push уведомления
- Offline режим
- Обновление Service Worker
Mobile приложения (Cordova/Capacitor)
- Выбор между Cordova и Capacitor
- Настройка мобильной разработки
- Конфигурация платформ iOS и Android
- Доступ к нативным API
- Плагины для устройств
- Иконки и splash экраны для мобильных
- Сборка и подпись приложений
- Публикация в сторы
Desktop приложения (Electron)
- Настройка Electron режима
- Главный и рендер процессы
- IPC коммуникация
- Нативные меню и диалоги
- Системные уведомления
- Автообновление приложений
- Сборка для разных платформ
- Дистрибуция desktop приложений
Browser Extension (BEX)
- Архитектура расширений браузера
- Настройка BEX режима
- Background scripts
- Content scripts
- Popup и options страницы
- Коммуникация между компонентами
- Манифест расширения
- Публикация расширений
Тестирование
- Настройка среды тестирования
- Unit тестирование с Jest/Vitest
- Тестирование компонентов
- Testing Library для Quasar
- E2E тестирование с Cypress
- Visual regression тестирование
- Mocking API запросов
- Покрытие кода тестами
Оптимизация производительности
- Анализ размера бандла
- Code splitting и lazy loading
- Оптимизация изображений
- Prefetch и preload стратегии
- Виртуализация больших списков
- Debouncing и throttling
- Мемоизация вычислений
- Web Workers для тяжелых операций
Безопасность
- XSS защита
- CSRF токены
- Content Security Policy
- Валидация на клиенте и сервере
- Безопасное хранение токенов
- HTTPS и SSL сертификаты
- Защита API endpoints
- Аудит зависимостей
Работа с TypeScript
- Настройка TypeScript в Quasar
- Типизация компонентов
- Типизация stores
- Типизация композаблов
- Generic компоненты
- Типизация API запросов
- Строгая типизация конфигурации
Композаблы и переиспользуемая логика
- Создание композаблов
- Встроенные Quasar композаблы
- useQuasar композабл
- Композаблы для работы с мета-данными
- Композаблы для платформ
- Создание библиотеки композаблов
Расширение Quasar
- Создание App Extensions
- Структура расширения
- Install и uninstall хуки
- Модификация Webpack конфигурации
- Установка сторонних расширений
Разработка собственных компонентов
- Архитектура компонента
- Композиция с Quasar компонентами
- Доступность (a11y)
- Документирование компонентов
- Создание библиотеки компонентов
- Публикация в npm
Инструменты разработчика
- Vue DevTools интеграция
- Quasar Dev Inspector
- Отладка SSR приложений
- Performance профилирование
- Network мониторинг
- Console логирование
CI/CD и автоматизация
- Настройка CI pipeline
- Автоматическое тестирование
- Линтинг и форматирование
- Автоматическая сборка
- Деплой на различные платформы
- Версионирование и release notes
Миграция и обновление
- Миграция с Quasar v1 на v2
- Обновление зависимостей
- Breaking changes между версиями
- Стратегии постепенной миграции
- Совместимость с Vue 3
Лучшие практики и паттерны
- Структура крупных проектов
- Организация кода
- Именование файлов и компонентов
- Композиция vs наследование
- Обработка ошибок
- Логирование
- Code review чеклисты