Vue 3. Разработка клиентских приложений
8 модулей, 140 уроков
Настройка проекта, архитектура приложения, базовый синтаксис, строение компонентов и шаблонизатор. Вы научитесь создавать Vue-проекты с нуля, работать с однофайловыми компонентами, директивами, вычисляемыми свойствами и хуками жизненного цикла.
- Почему разработчики выбирают Vue
- Что будет на курсе и как его проходить
- Пример технического задания для Vue-проекта
- Как создать новый проект Vue
- Создание нового проекта с помощью Vue init
- Создание нового проекта с помощью Vite.js
- Создание нового проекта с помощью Vue cli
- Добавление компонента Vue на страницу HTML
- Дерево компонентов. Однофайловые компоненты
- Создание экземпляра приложения
- Конфигурация проекта без работы с docker
- Установка окружения на Unix операционные системы
- Установка окружения на операционную систему Windows
- Установка и настройка учебного проекта
- Установка и настройка проекта OnlinePizza
- Возможные ошибки при установке окружения и способы их решения
- FAQ: использование Docker на курсе
- Компонент: шаблон
- Создание шаблона для компонента счётчика
- Вёрстка шаблона в проекте TaskBoard
- Вёрстка доски задач в проекте TaskBoard
- Задание: вёрстка компонентов в проекте OnlinePizza
- Компонент: скрипт Options API
- Компонент: скрипт Composition API
- Какой стиль написания компонентов выбрать
- Добавление мок-данных в проект TaskBoard
- Добавление вспомогательных функций и констант в проекте TaskBoard
- Условная отрисовка
- Отрисовка списков. Взаимодействие между v-for и v-if
- Добавление логики для компонента счётчика
- Добавление логики в шаблон в проекте TaskBoard
- Добавление логики на доску задач в проекте TaskBoard
- Задание: добавление переменных в компонент в проекте OnlinePizza
- Компонент: стили
- Стилизация компонента счётчика
- Добавление стилей в шаблон в проекте TaskBoard
- Добавление стилей на доску задач в проекте TaskBoard
- Задание: добавление стилей в проекте OnlinePizza
- Тест по разделу
- Критерии
- Хуки жизненного цикла
- Файловая структура проекта
- Работа с Vue Devtools
- Файл vite.config.js
- Обсудите оставшиеся вопросы в чате с авторами
Передача данных между компонентами через props, emit и слоты. Вы научитесь выстраивать коммуникацию между родительскими и дочерними компонентами, использовать v-model для двустороннего связывания и реализовывать Drag and Drop.
- Виды и обработка событий
- Виды взаимосвязей между компонентами
- Слоты и динамический контент
- Создание компонента AppIcon.vue в проекте TaskBoard
- Реализация drag-and-drop в проекте TaskBoard
- Задание: общие компоненты в проекте OnlinePizza
- Использование v-model между компонентами
- Взаимодействие внутри компонентов счётчика
- Рефакторинг компонента HomeView.vue в проекте TaskBoard
- Добавление бэклога на доску задач в проекте TaskBoard
- Добавление обработчиков задач и фильтров в корневой компонент
- Задание: компоненты конструктора в проекте OnlinePizza
- Задание: подключение компонентов конструктора в проекте OnlinePizza
- Тест по разделу
Реактивность, валидация, маршрутизация и автоматические лейауты. Вы научитесь настраивать Vue Router, создавать динамические маршруты, работать с вложенными роутами и строить многостраничные приложения с переключением макетов.
- Как работает реактивность компонента
- Виртуальный DOM
- Добавление общих компонентов в проект TaskBoard
- Работа над валидатором полей
- Задание: рефакторинг стилей и компонентов в проекте OnlinePizza
- Работа с маршрутизатором
- Создание автоматических шаблонов
- Подключение маршрутизатора к проекту TaskBoard
- Добавление автоматического шаблонизатора в проект TaskBoard
- Создание компонента для отображения деталей задачи в проекте TaskBoard
- Работа над компонентом чек-лист (подзадачи) в проекте TaskBoard
- Работа над комментариями к задаче в проекте TaskBoard
- Задание: маршрутизация и динамические лейауты в проекте OnlinePizza
- Пользовательские директивы
- Плагины и глобальные компоненты
- Рендер-функции
- Создание и редактирование задач в проекте TaskBoard
- Работа над компонентом создания и редактирования тегов в проекте TaskBoard
- Добавление страницы создания задач в проект TaskBoard
- Добавление страницы редактирования задач в проект TaskBoard
- Задание: добавление новых страниц в проект OnlinePizza
- Тест по разделу
Глобальное состояние приложения с помощью Pinia. Вы научитесь создавать хранилища, определять state, getters и actions, организовывать данные между несколькими сторами и подключать их к компонентам.
- Менеджер состояния. Архитектура Flux
- Pinia и Vuex
- Установка Pinia
- Создание хранилища Store
- Хранилище для счётчика
- Добавление глобального хранилища в проект TaskBoard
- Задание: добавление глобального хранилища в проект OnlinePizza
- Состояние хранилища
- Инициализация первоначального состояния хранилищ в проекте TaskBoard
- Задание: создание состояний в хранилищах OnlinePizza
- Геттеры хранилища
- Добавление геттеров хранилища в проект TaskBoard
- Задание: добавление геттеров хранилища в проект OnlinePizza
- Методы хранилища
- Добавление методов хранилища в проект TaskBoard
- Вынесение состояния из компонентов и подключение хранилищ в проект TaskBoard
- Задание: добавление методов хранилища в проект OnlinePizza
- Задание: подключение хранилищ к компонентам OnlinePizza
- Тест по разделу
HTTP-запросы, REST API и аутентификация. Вы научитесь настраивать подключение к серверу, создавать сервисы для работы с API, реализовывать авторизацию с токенами и использовать middleware для защиты маршрутов.
- Работа с HTTP
- Основы API
- Настройка Vite для работы с сервером
- Создаём подключение к серверу
- Создаём сервисы в проекте TaskBoard
- Аутентификация в проекте TaskBoard
- Создаём мидлвары в проекте TaskBoard
- Замена мок-данных на данные с сервера в проекте TaskBoard
- Обработка комментариев в проекте TaskBoard
- Обработка подзадач в проекте TaskBoard
- Задание: создание сервисов в проекте OnlinePizza
- Задание: аутентификация и авторизация в проекте OnlinePizza
- Задание: замена мок-данных на данные с сервера в проекте OnlinePizza
- Тест по разделу
Переходы, CSS- и JavaScript-анимации. Вы научитесь использовать компоненты Transition и TransitionGroup, анимировать появление и исчезновение элементов, создавать анимации маршрутов и применять хуки анимаций.
- Переходы и анимации
- Хуки анимаций
- Анимация списков
- Отскакивающий мяч CSS
- Отскакивающий мяч JavaScript
- Анимация маршрутов
- Добавление анимаций в проект TaskBoard
- Задание: добавление анимаций в проект OnlinePizza
- Тест по разделу
Юнит- и компонентное тестирование Vue-приложений. Вы научитесь писать тесты с Vitest, тестировать хранилища Pinia, компоненты с моками и стабами, а также понимать пирамиду тестирования и подход TDD.
- Верификация и валидация
- Зачем нужно тестирование
- Обзор Vue Test Utils и Vitest
- Что нужно тестировать, а что нет
- Mount и Shallow Mount
- Тестирование умных и глупых компонентов
- Программирование через тестирование
- Создаём мок-сервисы для тестов в проект TaskBoard
- Тестируем хранилище Pinia в проекте TaskBoard
- Тестируем компонент в проекте TaskBoard
- Задание: написание тестов для проекта OnlinePizza
- Тест по разделу
Подведение итогов курса, рекомендации по дальнейшему развитию и ссылки на полезные ресурсы экосистемы Vue.
- Итоги и советы
- Итоговый тест по курсу
- Обратная связь по курсу
- Завершение курса
- Дальнейшие шаги и ресурсы