Все курсы

Курс по Vue.js

Курс по профессиональной разработке веб-приложений с помощью Vue.js.

Vue.js

Цели курса

Vue.js – прагматичный JavaScript фреймворк, использующийся как для интерфейсов в обычнох веб-страницах, так и для разработки современных SPA приложений.

Курс посвящён разработке на Vue.js: от использования его как небольшой библиотеки до создания современного SPA приложения.

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

Курс будет посвящён Vue 2, так как Vue 3 пока находится в beta-версии, и нет устоявшихся практик. Тем не менее, учтены предстоящие изменения, а в конце курса будут рассмотрены основные нововведения и изменения.

Как организовано обучение?

Курс состоит из 10 занятий и организационного собрания.

До начала обучения: вводные материалы

За неделю до начала курса вы получите письмо с материалами для подготовки к курсу.

Мы также будем использовать систему Git/GitHub для обмена исходным кодом, так делает большинство проектов. Для тех, кому это в новинку - дадим крэш-курс и поможем разобраться.

Онлайн-занятия с преподавателем 2 раза в неделю

Занятие проходит в формате вебинара. Запись занятия доступна через 15 минут после окончания. Вы также сохраняете доступ к записям после окончания курса.

Домашние задания, обратная связь по ним

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

Чат

Между занятиями доступен групповой чат для общения и вопросов преподавателю.

Курсовой проект

Делаем курсовой проект: сервис организации митапов. Большую часть кода для проекта пишете вы.

Результат

Вы хорошо понимаете возможности Vue.js и основных библиотек его экосистемы.

Вы умеете разрабатывать компоненты на Vue.js и использовать их как в существующих проектах, так и разрабатывать SPA приложения на Vue.js.

Вы используете различные инструменты разработки современных веб-приложений.

Вы знакомы с Nuxt.js и серверным рендерингом на Vue.js.

Вы знаете в каком направлении развиваться дальше.

Сертификат

По окончанию курсов вы получаете сертификат в электронном виде на русском и английском языках.

Хотя сертификатам в нашей профессии обычно не придают значения. Главное - знания и умения, которые вы получите, если будете полноценно участвовать в курсе.

img

Программа по занятиям

Блок 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, разберём основные нововведения и изменения.

Курсовой проект

Сервис для "митапов" (собраний, конференций)

  • Одностраничное приложение: роутинг, динамическая подгрузка страниц.
  • Вывод в виде календаря или списка.
  • Работа с формами: генерация, управлеине, свои интерфейсы.
  • Запросы к серверному API.
  • Ряд других графических компонент.
  • Современная архитектура.

Предварительные требования

  • Знание JavaScript, включая ES2015 и выше.
  • Интернет 256kb/s или быстрее для видео.

Преподаватель

Photo
Григорий ШарцевВедет курс с 15 июня 2020

Веб-разработкой занимаюсь с 2014 года, с Vue.js начал работать с 2017 года. Сейчас занимаюсь разработкой внутренних приложений для компании Lukoil на Vue.js.

Также давно занимаюсь преподаванием. Веду свой курс веб-разработки в университете и несколько лет обучаю олимпиадному и промышленному программированию. Активно участвую в русскоязычных ИТ сообществах.

Гарантия

  • Если объяснения будут вам непонятны
  • Если курсы не дадут вам новых знаний и умений
  • Если вы не сможете подключиться к системе онлайн-обучения

…то вы сможете получить деньги назад.

Для этого достаточно не позже окончания первой недели курса написать, указав причину из этого списка и что именно вас не устраивает, и тогда ваше участие будет прекращено, а вы получите деньги обратно.

Для компаний

У нас большой опыт работы с самыми разными компаниями: как маленькими, так и IT-гигантами (Яндекс, Мейл.ру и другие).

  • При записи нужно выбрать способ оплаты "счёт на компанию", и документы будут автоматически сгенерированы: договор, акт и счёт.
  • Для зарубежных компаний выдаём инвойс на английском языке.
  • Физическим лицам даём справку об оплате, если нужна компании для компенсации расходов.
  • Сведения о нас (для бухгалтерии): скачать архив с документами.

Подписаться на уведомления по курсу

Набор на этот курс открывается каждые 4 недели. Вы можете запросить уведомление:

Мы рассылаем уведомления только когда вы их запрашиваете, вы можете отказаться в любой момент. Подписываясь на рассылку, вы соглашаетесь с политикой конфиденциальности.

Комментарии

перед тем как писать…
  • Если вам кажется, что в статье что-то не так - вместо комментария напишите на GitHub.
  • Для одной строки кода используйте тег <code>, для нескольких строк кода — тег <pre>, если больше 10 строк — ссылку на песочницу (plnkr, JSBin, codepen…)
  • Если что-то непонятно в статье — пишите, что именно и с какого места.