Курс по Vue.js

Блок 1

Знакомство с Vue.js

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

• Основы Vue.js

  • Шаблоны Vue.js
  • Реактивность во Vue.js, вычислимые свойства, отслеживание изменений, Virtual DOM
  • Обработка событий
  • Работа с формами
  • Анимации
  • Хуки жизненного цикла

• Компоненты во Vue.js

  • Компонентный подход
  • Создание компонентов
  • Взаимодействие компонентов

Блок 2

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

Перейдём к современному подходу к разработке JavaScript приложений и научимся создавать одностраничные приложения на Vue.js.

• Сборка приложения

  • Организация сборки, инструменты
  • Однофайловые компоненты
  • Scoped styles
  • Конфигурирование webpack для разработки на Vue.js

• Vue CLI

  • Создание приложений с @vue/cli
  • Разработка и сборка приложения через vue-cli-service
  • Конфигурирование сборки и приложения

• Разработка одностраничных приложений на Vue.js

  • Одностраничные приложения (SPA), отличия от традиционных веб-приложений
  • Маршрутизация на клиенте, vue-router
  • Параметризированные и вложенные маршруты
  • Взаимодействие с API, получение данных на маршрутах

Блок 3

Углубление во Vue.js и разработку компонентов

Разберёмся, как работает реактивность и Virtual DOM, какие есть ограничения при разработке на Vue.js, как расширять Vue. Рассмотрим подходы к разработке компонентов.

• Как реализована реактивность и Virtual DOM во Vue.js
• Ограничения Vue.js и работа с другими библиотеками
• Пользовательские директивы
• Динамические компоненты
• Функциональные компоненты
• Рендер функции
• Плагины
• Компоненты с формами и unidirectional data flow
• Паттерны компонентов
• Валидация форм с библиотеками vee-validate и vuelidate

Блок 4

Глобальные взаимодействия, Vuex

Изучим подходы к глобальному взаимодействию компонентов приложения и хранению данных, разберёмся с шиной событий и способах её реализации, с концепцией Flux и библиотекой Vuex.

• Где и как можно хранить глобальные данные в приложении
• Корневой компонент
• Шина событий и способы её реализации
• Vue.observable
• Паттерн Flux: зачем он нужен и его реализация с библиотекой vuex
• Модули во vuex
• Работа с формами во vuex
• Библиотека vuex-persist
• Дополнительные способы взаимодействия компонентов во Vue.js
• Библиотеки vue-portal и teleport

Блок 5

Архитектурные аспекты проекта

Различные аспекты разработки приложения на уровне проекта.

• Архитектура приложения и организации работы с API
• Аутентификация и авторизация
• Router Guards
• Обработка ошибок
• Тестирование компонентов и приложения, библиотека vue-test-utils

Блок 6

Куда развиваться дальше

Рассмотрим проблемы SEO в SPA приложениях и способы их решения. Сравним prerender и server-side rendering. Разберём фреймворк NuxtJS и его возможности.

Пройдёмся по интересным библиотекам, которые могут пригодиться при разработке Vue.js.

Поговорим о Vue 3, разберём основные нововведения и изменения.