Все курсы

Vue 3. Разработка клиентских приложений

8 модулей, 140 уроков

Vue 3Composition APIPiniaVue RouterVitest
1.Основы синтаксиса и базовых возможностей Vue
Бесплатно

Настройка проекта, архитектура приложения, базовый синтаксис, строение компонентов и шаблонизатор. Вы научитесь создавать Vue-проекты с нуля, работать с однофайловыми компонентами, директивами, вычисляемыми свойствами и хуками жизненного цикла.

2.Взаимодействие между компонентами Vue.js

Передача данных между компонентами через props, emit и слоты. Вы научитесь выстраивать коммуникацию между родительскими и дочерними компонентами, использовать v-model для двустороннего связывания и реализовывать Drag and Drop.

  • Виды и обработка событий
  • Виды взаимосвязей между компонентами
  • Слоты и динамический контент
  • Создание компонента AppIcon.vue в проекте TaskBoard
  • Реализация drag-and-drop в проекте TaskBoard
  • Задание: общие компоненты в проекте OnlinePizza
  • Использование v-model между компонентами
  • Взаимодействие внутри компонентов счётчика
  • Рефакторинг компонента HomeView.vue в проекте TaskBoard
  • Добавление бэклога на доску задач в проекте TaskBoard
  • Добавление обработчиков задач и фильтров в корневой компонент
  • Задание: компоненты конструктора в проекте OnlinePizza
  • Задание: подключение компонентов конструктора в проекте OnlinePizza
  • Тест по разделу
3.Углублённое понимание Vue.js

Реактивность, валидация, маршрутизация и автоматические лейауты. Вы научитесь настраивать Vue Router, создавать динамические маршруты, работать с вложенными роутами и строить многостраничные приложения с переключением макетов.

  • Как работает реактивность компонента
  • Виртуальный DOM
  • Добавление общих компонентов в проект TaskBoard
  • Работа над валидатором полей
  • Задание: рефакторинг стилей и компонентов в проекте OnlinePizza
  • Работа с маршрутизатором
  • Создание автоматических шаблонов
  • Подключение маршрутизатора к проекту TaskBoard
  • Добавление автоматического шаблонизатора в проект TaskBoard
  • Создание компонента для отображения деталей задачи в проекте TaskBoard
  • Работа над компонентом чек-лист (подзадачи) в проекте TaskBoard
  • Работа над комментариями к задаче в проекте TaskBoard
  • Задание: маршрутизация и динамические лейауты в проекте OnlinePizza
  • Пользовательские директивы
  • Плагины и глобальные компоненты
  • Рендер-функции
  • Создание и редактирование задач в проекте TaskBoard
  • Работа над компонентом создания и редактирования тегов в проекте TaskBoard
  • Добавление страницы создания задач в проект TaskBoard
  • Добавление страницы редактирования задач в проект TaskBoard
  • Задание: добавление новых страниц в проект OnlinePizza
  • Тест по разделу
4.Менеджер состояния

Глобальное состояние приложения с помощью Pinia. Вы научитесь создавать хранилища, определять state, getters и actions, организовывать данные между несколькими сторами и подключать их к компонентам.

  • Менеджер состояния. Архитектура Flux
  • Pinia и Vuex
  • Установка Pinia
  • Создание хранилища Store
  • Хранилище для счётчика
  • Добавление глобального хранилища в проект TaskBoard
  • Задание: добавление глобального хранилища в проект OnlinePizza
  • Состояние хранилища
  • Инициализация первоначального состояния хранилищ в проекте TaskBoard
  • Задание: создание состояний в хранилищах OnlinePizza
  • Геттеры хранилища
  • Добавление геттеров хранилища в проект TaskBoard
  • Задание: добавление геттеров хранилища в проект OnlinePizza
  • Методы хранилища
  • Добавление методов хранилища в проект TaskBoard
  • Вынесение состояния из компонентов и подключение хранилищ в проект TaskBoard
  • Задание: добавление методов хранилища в проект OnlinePizza
  • Задание: подключение хранилищ к компонентам OnlinePizza
  • Тест по разделу
5.Работа с сетью

HTTP-запросы, REST API и аутентификация. Вы научитесь настраивать подключение к серверу, создавать сервисы для работы с API, реализовывать авторизацию с токенами и использовать middleware для защиты маршрутов.

  • Работа с HTTP
  • Основы API
  • Настройка Vite для работы с сервером
  • Создаём подключение к серверу
  • Создаём сервисы в проекте TaskBoard
  • Аутентификация в проекте TaskBoard
  • Создаём мидлвары в проекте TaskBoard
  • Замена мок-данных на данные с сервера в проекте TaskBoard
  • Обработка комментариев в проекте TaskBoard
  • Обработка подзадач в проекте TaskBoard
  • Задание: создание сервисов в проекте OnlinePizza
  • Задание: аутентификация и авторизация в проекте OnlinePizza
  • Задание: замена мок-данных на данные с сервера в проекте OnlinePizza
  • Тест по разделу
6.Анимации во Vue.js

Переходы, CSS- и JavaScript-анимации. Вы научитесь использовать компоненты Transition и TransitionGroup, анимировать появление и исчезновение элементов, создавать анимации маршрутов и применять хуки анимаций.

  • Переходы и анимации
  • Хуки анимаций
  • Анимация списков
  • Отскакивающий мяч CSS
  • Отскакивающий мяч JavaScript
  • Анимация маршрутов
  • Добавление анимаций в проект TaskBoard
  • Задание: добавление анимаций в проект OnlinePizza
  • Тест по разделу
7.Тестирование приложения

Юнит- и компонентное тестирование Vue-приложений. Вы научитесь писать тесты с Vitest, тестировать хранилища Pinia, компоненты с моками и стабами, а также понимать пирамиду тестирования и подход TDD.

  • Верификация и валидация
  • Зачем нужно тестирование
  • Обзор Vue Test Utils и Vitest
  • Что нужно тестировать, а что нет
  • Mount и Shallow Mount
  • Тестирование умных и глупых компонентов
  • Программирование через тестирование
  • Создаём мок-сервисы для тестов в проект TaskBoard
  • Тестируем хранилище Pinia в проекте TaskBoard
  • Тестируем компонент в проекте TaskBoard
  • Задание: написание тестов для проекта OnlinePizza
  • Тест по разделу
8.Итоговый раздел

Подведение итогов курса, рекомендации по дальнейшему развитию и ссылки на полезные ресурсы экосистемы Vue.

  • Итоги и советы
  • Итоговый тест по курсу
  • Обратная связь по курсу
  • Завершение курса
  • Дальнейшие шаги и ресурсы