Все курсы

Курс по Vue.js

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

Vue.js
Ближайшая группа
Перейти к записи

Цели курса

Курс посвящён разработĸе на Vue 3 - мы используем Composition API, современные библиотеки и подходы.

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

На этом курсе мы используем Javascript, но также рассматриваем и Typescript.

В процессе обучения мы разработаем проект, на примере которого постепенно изучим возможности Vue, различные подходы к решению практических задач и основные библиотеки его экосистемы. В рамках разработки курсового проекта мы также разработаем небольшую библиотеку переиспользуемых UI компонентов. А в процессе изучения Vue рассмотрим теорию связных тем frontend-разработки - одностраничные приложения, инструменты сборки, Vite, тестирование и другие.

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

Курс идёт 2 месяца.

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

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

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

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

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

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

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

Чат

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

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

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

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

Библиотека UI компонентов

Параллельно с проектом мы будем создавать библиотеку переиспользумых UI компонентов, большую часть которых вы также реализуете самостоятельно в домашних задачах.

Итоговый проект

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

Результат

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

Вы умеете разрабатывать приложения на Vue и использовать готовые Vue компоненты.

Вы умеете разрабатывать переиспользуемые и продвинутые компоненты на Vue.

Вы понимаете работу Vue и нюансы его использования.

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

Сертификат

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

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

img

Программа курса

Блок 1 - Основы

Изучаем основы Vue с Composition API, создаём компоненты.

  • Основные концепции в разработке на Vue.
  • Создание Vue приложения с Composition API и отличие от Options API.
  • Синтаксис шаблонов.
  • Работа с DOM-событиями, атрибутами, элементами форм.
  • Реактивность, отслеживание, computed.
  • Компонентный подход, описание и использование компонентов на Vue.
  • Пропсы, события и слоты компонентов.
  • Хуки жизненного цикла.
  • Компоненты анимаций Transition и TransitionGroup.

Современный подход к разработке Vue приложений, одностраничные приложения с Vue Router.

  • Инструменты разработки во Frontend: транспайлеры, линтер, сборщики.
  • Сборщик Vite и его отличие от других сборщиков.
  • SFC - Однофайловые компоненты во Vue.
  • Работа со стилями в SFC, инкапсуляция стилей через scoped стили и CSS модули, привязка значений.
  • SFC Setup и макросы компиляции: defineProps, defineEmits, defineSlots и defineOptions.
  • Использование TypeScript в Vue.
  • Однонаправленный поток данных в взаимодействии компонентов (one-way dataflow).
  • Разработка SPA на Vue с Vue Router.

Composables и библиотеки Pinia и VueUse.

  • Composables.
  • Shared state, composables с глобальным состоянием.
  • Центральные хранилища и Pinia store.
  • Библиотека VueUse.
  • Нюансы работы с setup context.
  • Экспериментальный Suspense.

Блок 2 - Углубление знаний

Переходим к более продвинутой разработке на Vue, создание переиспользуемых UI-компонентов.

  • Подходы к созданию компонентов обёрток и наследование атрибутов.
  • Макрос компиляции defineModel.
  • Template Refs и макрос компиляции defineExpose.

Разберём как Vue работает "изнутри" - реактивность и рендеринг, продолжим работу с продвинутыми UI-компонентами.

  • "Под капотом" Vue: реактивность, nextTick.
  • "Под капотом" Vue: рендеринг и Virtual DOM, специальный атрибут key и компонент KeepAlive.
  • Render-функция, JSX и их применение в разработке компонентов.
  • Scoped slots.
  • Оптимизация рендеринга Vue приложений.

В конце блока изучим различные применения provide/inject, а также другие способы взаимодействия компонентов приложения и переиспользования кода.

  • Provide/Inject в разработке приложения.
  • Provide/Inject в разработке UI компонентов.
  • Шина событий.
  • Компонент Teleport.
  • Пользовательские директивы.
  • Создание Vue плагинов.
  • Когда нужны Vue плагины и когда избегать их использования.

Блок 3 - Архитектура

Изучив Vue, научимся тестировать Vue компоненты с Vitest и Vue Test Utils. В заключении курса поговорим об архитектуре приложения за пределами Vue компонентов.

  • Unit-тестирование Vue компонентов с Vitest и Vue Test Utils, отличие от Testing Library и e2e тестирования.
  • Проблемы SPA и способы их решения: prerendering и server-side rendering.
  • Архитектура приложения за пределами Vue компонентов.

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

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

  1. Одностраничное приложение: роутинг, динамическая подгрузка страниц.
  2. Вывод в виде календаря или списка.
  3. Работа с формами: компоненты форм, генерация.
  4. Сетевые запросы, HTTP API, аутентификация.
  5. Современная архитектура.

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

  • Знание основ HTML/CSS: умение работать с основными HTML элементами и готовой вёрсткой.
  • Знание современного JavaScript, желательно основ DOM API и работы с HTTP API.
  • Интернет 256 кб/с или быстрее для видео.

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

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

Веб-разработкой занимаюсь с 2014 года, а с Vue начал работать с 2017 года. С 2022 года занимаюсь frontend разработкой платформы общения Nextcloud Talk в компании Nextcloud.

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

Что говорят о курсе участники?

Мы занимаемся обучением с 2007 года. За это время у нас обучились тысячи разработчиков из разных стран и компаний.

Все отзывы являются честными. Мы не модерируем их.

Курс регулярно обновляется. Все отзывы относятся к последней версии курса.

Гарантия

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

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

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

Для компаний

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

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

Физическим лицам даём справку об оплате, если нужна компании для компенсации расходов и документы для налогового вычета: детали для РФ.

Если остались вопросы – посмотрите в часто задаваемых, напишите на почту help@javascript.ru (ответ обычно в течение дня), а если срочно — задайте по телефону +7-903-5419441.

Комментарии

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