Учебник Element Plus

Введение
- Что такое Element Plus
- История и эволюция библиотеки
- Отличия от Element UI
- Архитектура и принципы работы
- Системные требования и совместимость
- Когда использовать Element Plus
Установка и настройка
- Установка через npm
- Установка через yarn
- Установка через pnpm
- Подключение через CDN
- Интеграция с Vite
- Интеграция с Vue CLI
- Интеграция с Webpack
- Настройка TypeScript
- Автоматический импорт компонентов
- Ручной импорт компонентов
- Настройка tree-shaking
- Оптимизация сборки
Базовая конфигурация
- Глобальная конфигурация библиотеки
- Настройка локализации
- Работа с темами
- Переменные CSS
- Переопределение стилей
- Настройка z-index
- Конфигурация сообщений и уведомлений
- Глобальные параметры компонентов
Основы работы с компонентами
- Структура компонентов
- Входные параметры (props)
- События и обработчики
- Слоты и scoped slots
- Ref и доступ к методам компонента
- Композиция компонентов
- Стилизация через CSS классы
Базовые компоненты
- Button
- Link
- Text
- Icon
- Border
- Container
- Layout (Row и Col)
- Space
- Scrollbar
- Divider
Компоненты форм
- Form
- Form Item
- Input
- Input Number
- Autocomplete
- Select
- Cascader
- Switch
- Slider
- Time Picker
- Date Picker
- Datetime Picker
- Upload
- Rate
- Color Picker
- Transfer
- Checkbox
- Radio
Валидация форм
- Правила валидации
- Встроенные валидаторы
- Пользовательские валидаторы
- Асинхронная валидация
- Динамические правила
- Валидация отдельных полей
- Валидация всей формы
- Обработка ошибок валидации
- Сброс валидации
Компоненты данных
- Table
- Pagination
- Tag
- Progress
- Tree
- Tree Select
- Statistic
- Empty
- Descriptions
- Result
- Avatar
- Badge
- Card
- Calendar
- Timeline
- Collapse
- Carousel
Работа с таблицами
- Базовая структура таблицы
- Сортировка данных
- Фильтрация столбцов
- Пользовательские шаблоны ячеек
- Фиксированные столбцы
- Фиксированный заголовок
- Группировка столбцов
- Развертываемые строки
- Выбор строк
- Редактирование ячеек
- Динамическая высота строк
- Виртуальный скроллинг
- Экспорт данных
Tree и древовидные структуры
- Базовая работа с деревом
- Загрузка данных
- Ленивая загрузка узлов
- Выбор узлов
- Множественный выбор
- Drag and drop
- Пользовательские шаблоны узлов
- Фильтрация дерева
- Программное управление деревом
Навигационные компоненты
- Affix
- Breadcrumb
- Dropdown
- Menu
- Page Header
- Steps
- Tabs
- Backtop
Уведомления и обратная связь
- Alert
- Loading
- Message
- Message Box
- Notification
- Popconfirm
- Drawer
- Dialog
- Tooltip
- Popover
Модальные окна и диалоги
- Базовое использование Dialog
- Программное открытие диалогов
- Вложенные диалоги
- Полноэкранные диалоги
- Drawer для боковых панелей
- Message Box для подтверждений
- Пользовательские модальные окна
- Управление фокусом
- Предотвращение закрытия
Layout и сетки
- Основы Grid системы
- Адаптивные breakpoints
- Гибкие отступы (gutter)
- Выравнивание элементов
- Порядок элементов
- Container layouts
- Скрытие элементов на разных экранах
Работа с иконками
- Встроенные иконки
- Установка пакета иконок
- Использование иконок в компонентах
- Пользовательские иконки
- SVG иконки
- Размер и цвет иконок
Темизация
- Система токенов дизайна
- CSS переменные
- Создание пользовательской темы
- Переопределение цветовой палитры
- Темная тема
- Динамическая смена темы
- Использование препроцессоров
- SCSS переменные
- Миксины и функции
Интернационализация
- Подключение локалей
- Встроенные языковые пакеты
- Создание пользовательской локали
- Динамическая смена языка
- Форматирование дат и времени
- RTL поддержка
- Локализация валидации
Адаптивность и responsive design
- Медиа-запросы в Element Plus
- Скрытие компонентов
- Адаптивные сетки
- Мобильная оптимизация
- Точки останова
- Адаптивные таблицы
- Touch события
Продвинутые паттерны
- Wrapper компоненты
- Render functions
- Динамические компоненты
- Teleport и Portal паттерны
- Provide/Inject с компонентами
- Mixins для Element Plus
- Композиционные функции (composables)
Управление состоянием
- Локальное состояние компонентов
- Интеграция с Pinia
- Интеграция с Vuex
- Синхронизация состояния форм
- Управление модальными окнами
- Кэширование данных таблиц
Оптимизация производительности
- Ленивая загрузка компонентов
- Виртуализация списков
- Debounce и throttle
- Мемоизация данных
- Оптимизация рендеринга таблиц
- Оптимизация форм
- Профилирование и отладка
Доступность (a11y)
- ARIA атрибуты
- Навигация с клавиатуры
- Screen reader поддержка
- Фокус-менеджмент
- Семантическая разметка
- Контрастность и читаемость
Тестирование
- Unit тестирование компонентов
- Интеграционное тестирование
- E2E тестирование
- Тестирование форм
- Мокирование компонентов Element Plus
- Snapshot тестирование
- Тестирование доступности
Миграция и совместимость
- Миграция с Element UI
- Breaking changes
- Обратная совместимость
- Постепенная миграция
- Совместное использование библиотек
- Решение конфликтов
Расширение функциональности
- Создание плагинов
- Директивы для Element Plus
- Пользовательские компоненты на базе Element Plus
- Композиция с другими библиотеками
- Регистрация глобальных компонентов
- Расширение существующих компонентов
Работа с SSR
- Настройка серверного рендеринга
- Nuxt интеграция
- Hydration
- Оптимизация для SSR
- Решение проблем с SSR
- CSS extraction
Отладка и troubleshooting
- Инструменты разработчика
- Vue DevTools
- Частые ошибки
- Диагностика проблем производительности
- Отладка стилей
- Работа с консолью браузера
- Source maps
Интеграция с экосистемой Vue
- Vue Router
- Композиционное API
- TypeScript типизация
- Vite плагины
- ESLint конфигурация
- Prettier настройка
Безопасность
- XSS защита
- Санитизация пользовательского ввода
- Безопасная работа с v-html
- CSP политики
- Валидация на стороне клиента
- Безопасность загрузки файлов
Production deployment
- Оптимизация bundle
- Code splitting
- Lazy loading
- Кэширование
- CDN стратегии
- Мониторинг ошибок
- Performance metrics
Паттерны проектирования
- Архитектура приложения
- Структура проекта
- Переиспользуемые компоненты
- Composition vs Options API
- Управление зависимостями
- Слой абстракции над Element Plus
Справочник API
- Глобальные методы
- Глобальные свойства
- TypeScript определения
- CSS классы и переменные
- События и их сигнатуры
- Slots reference
- Props reference