Курс по Vue.js

Блок 1

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

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

• Основы Vue.js

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

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

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

Блок 2

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

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

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

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

• Vue CLI

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

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

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

• Тестирование

  • Что такое тестирование
  • Unit-тестирование с Jest
  • Тестирование Vue.js приложения с Jest и vue-test-utils

Блок 3

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

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

• Как реализована реактивность и как с ней правильно работать
• Vue.observable и reactive
• Virtual DOM во Vue.js и что важно знать при работе с ним
• Рендер-функция
• Ограничения Vue.js и работа с другими библиотеками
• Динамические компоненты
• Компоненты формы и unidirectional data flow

Блок 4

Расширение Vue.js и переиспользование логики

Разберём ещё несколько способов взаимодействия компонентов. Научимся расширять Vue.js и переиспользовать логику. Изучим Composition API из Vue 3.

• Особые способы взаимодействия компонентов
• Шина событий и способы её реализации
• Библиотека portal-vue и Teleport из Vue 3
• Где и как можно хранить глобальные данные в приложении
• Provide / Inject во Vue 2 и Vue 3
• Scoped Slots
• Пользовательские директивы
• Миксины
• Плагины
• Vue 3 Composition API

Блок 5

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

Разберёмся с концепцией Flux и библиотекой Vuex. Рассмотрим различные аспекты разработки приложения на уровне проекта.

• Паттерн Flux: зачем он нужен и его реализация с библиотекой vuex
• Модули во vuex
• Работа с формами во vuex
• Архитектура приложения и организация работы с API
• Обработка ошибок
• Некоторые паттерны компонентов
• Router Guards
• Аутентификация

Блок 6

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

Проблемы SPA и способы их решения: сравним prerendering и server-side rendering, проведём краткий обзор фреймворка Nuxt.js.

Дополнительные темы по вашим вопросам и пожеланиям.