Курс по Vue.js 2
C нуля до про

Овладей трендовым фреймворком в курсе vue.js - с нуля до про. Полное руководство по современной веб-разработке!

  • Смотрите в любое время Более 170+ уже записанных видео, минимум теории и максимум практики
  • Доступ к курсу Навсегда
Записаться на курс
-39% ~21 ч.
Курс по Vue.js 2 с нуля до про
В курс включено:
  • Домашние задания Пять домашних работ, рекомендации и консультации на всех этапах
  • Кейсы и проекты Семь выпускных проекта для вашего портфолио и GitHub
  • Доступ к общему чату Чат со всеми участниками и кураторами курса
  • Сертификат Именной сертификат по окончании курса

Чему вы научитесь


  • Options API
    Options API

    Не стоит беспокоиться, текущий курс все еще актуален, потому что 90% кода из текущего курса будет работать на Vue.js 3, поскольку весь текущий курс построен на Options API.


  • SPA
    SPA

    Vue.js является лишь представлением данных. Мы изучим как хранить данные, взаимодействововать с ними по технологии REST API - принимать и отдавать запросы.


  • Nuxt.js
    Nuxt.js

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


  • Защите и авторизации
    Защите и авторизации

    Авторизация на клиенте, защита данных, проверка авторизации на сервере. Скрытие роутов для не зарегистрированных пользователей. Разграничение ролей.


  • Vuex
    Vuex

    Actions, Mutations, State, Getters - все для правильного храненения данных и их дальнейшего взаимодействия.


  • Правильно разделять код и UI на компоненты
    Правильно разделять код и UI на компоненты

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


  • REST API
    REST API

    На API строится весь современный веб. Понимание того как работают такие технологии как REST API или GraphQL делают вас намного востребованнее и профессиональнее.

Почему нужно учить vue?

Vue – мировой лидер фреймворков! Этот фреймворк используется среди компний крупного и среднего бизнеса по всему миру. Самую большую популярность vue.js получил на китайском и европейском рынке.

behance gitlab laravel xiaomi

Vue.js используют большинство китайских компаний: Alibaba (мировой лидер торговли в сети), Baidu (IT-гигант, лидер отрасли), Xiaomi, Sina Weibo и другие крупные компании.

  • По статистике Google Trends - Vue является самым популярным фреймворком в мире:

    Статистика Google Trends

  • России и СНГ Vue становится все более и более популярным:

    Статистика Google Trends

  • Профи c GitHub так же выбирают Vue:

    vue react angular

    На текущий момент Vue почти в три раза популярнее Angular. И уже обогнал своего ближайшего конкурента – React от Facebook.

80 000₽

Средняя зарплата Frontend разработчика по РФ

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

Согласно hh, SuperJob и Яндекс работа, где собирались данные о вакансиях - это средняя зарплата vue.js разработчика. В данной выборке не участвовали города миллионники.
Поэтому в Москве, Санкт-Петербурге и других городах-миллионниках она может быть выше (иногда в 2 - 3 раза).

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

#1 Видеоуроки ~50 м.

Основы Options API

Основные моменты Vue.js, которые применим в первом же приложении и начнем двигаться дальше!

  • Основы Options API
  • - Про визуальные фреймворки или почему важно писать все самому
  • - Компонентный подход равно переиспользование
  • - Work Flow - Настройка редактора
  • - Work Flow - Настройка необходимых плагинов
  • - Инициализация vue.js
  • - Динамическая смена данных в data
  • - Methods и их применение
  • - Вычисляемые свойства - Computed
  • - Работа с Boolean значениями
  • - Циклы и вывод списков
  • - Хуки жизненного цикла вью компонентов
#2 Видеоуроки ~1 ч. 20 м.

Приложение с заметками

Напишем приложение с заметками, где применим все знания из "Основы vue.js" и начнем двигаться дальше!

    • Приложение с заметками
    • Приложение с заметками
    • Приложение с заметками
  • - Интерполяция
  • - Вывод HTML кода
  • - Работа с CSS классами
  • - Динамическая смена классов
  • - Динамические и локальные стили
  • - Управление отображением элементов
  • - Toggle у классов
  • - Работа со списками
  • - Сбросы и валидация
  • - Оптимизация приложения с computed
  • - Компонентный подход
  • - Доступ к DOM элементам
  • - Регистрация компонентов
  • - Переиспользование компонентов
  • - Передача параметров от родителя к компоненту и обратно
  • - Оптимизация компонентов
  • - Отслеживание изменений с watch
  • - Фильтрация элементов массива
  • - Обработка ошибок
#3 Видеоуроки ~1 ч.

Основы VUE CLI

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

  • Основы VUE CLI
  • - Преимущества и использование VUE CLI
  • - Установка VUE C3 через npm и npx
  • - Лучшая структура проектов изначально
  • - Подключение SCSS, кастомных шрифтов
  • - Общая настройка для билдов
  • - Настройка для не стандартных билдов
  • - Настройка хешей и карт стилей/скриптов
  • - Билд для локальной машины
  • - Билд для сервера
#4 Видеоуроки ~40 м.

Vue Router

Научимся строить маршруты и перерисовывать страницы в зависимости от пути

  • - Основа SPA. Что такое роутер и зачем он нужен
  • - Установка vue-router
  • - Динамическая перерисовка без перезагрузки страницы
  • - Динамичный навбар и ссылки
  • - Активные ссылки
  • - Не существующие роуты - страница 404
  • - Хеш и мод history
#1 Видеоуроки ~1 ч. 30 м.

Vuex

Для быстрого и удобного взаимодействия мы научимся хранить данные внутри приложения при помощи VUEX

  • - Правильное хранение данных в VUEX
  • - Использование state
  • - Использование getters
  • - Использование actions
  • - Использование mutations
  • - Оптимизация с помощью модулей
#2 Видеоуроки ~2 ч.

Webpack в связке в vue.js

В этом модуле мы напишем универсальную сборку на Webpack`е заточенную под vue.
Эту сборку точно также можно будет переиспользовать в любых проектах.

Далее у вас будет выбор - чем именно собирать все последующие проекты это будет webpack или vue cli

  • Webpack в связке в vue.js
  • - Webpack и vue cli основная разница
  • - Когда следует использовать Webpack, а когда vue cli
  • - Установка Webpack
  • - Подключение js/css файлов
  • - Настройка препроцессоров styl / scss / less
  • - Обработка различных файлов
  • - Обработка html файлов
  • - Подключение шрифтов
  • - Установка Vue в Webpack
  • - Обработка и компиляция .vue файлов
  • - Подключение vuex
  • - Оптимизация Store через модули
#3 Видеоуроки 30 м.

Vue.js + Wepback для быстрой верстки

Научимся использовать vue в верстке и оптимизировать компоненты с VUEX. Что поможет сократить время написания кода и значительно повысит его качество

  • Vue.js + Wepback для быстрой верстки
  • - Оптимизация компонентного подхода для webpack
  • - Подключение vue компонентов в обычный лендинг
  • - Разные компоненты на нескольких html/php страницах
  • - Vuex в верстке
  • - Vuex оптимизация экшенов
  • - Создание UI компонентов
  • - Перенос UI в хтмл/php файлы
  • - Проблемы и решения рендеринга vue компонентов
#4 Видеоуроки 30 м.

Формы, модальные окна и валидация

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

    • Формы, модальные окна и валидация
    • Формы, модальные окна и валидация
  • - Динамические атрибуты
  • - Модель для работы с формами
  • - Текстовый инпут / Текстарея
  • - Чекбоксы / Радио кнопки / Селекты
  • - UI компонент модального окна
  • - Использование слотов на практике
  • - Закрытие модального окна по клику на крестик, область или ESC
  • - Валидация входящих параметров
  • - Связь дочерних компонентов
  • - Директива v-show vs v-if
  • - Построение сложных анимаций
  • - Валидация email / password / и других входных данных
  • - Учимся переиспользовать модальные окна из проекта в проект
#5 Видеоуроки 50 м.

Приложение Shop

В этом приложении, как и во всех последующих, мы будем использовать vue-roter и vuex. Все продукты будут храниться в общем хранилище, а роутер будет обрабатывать все динамические маршруты

    • Приложение Shop
    • Приложение Shop
    • Приложение Shop
  • - Настройка vuex и vue-router
  • - Создание динамического меню
  • - Активная ссылка у текущего роута
  • - Создание карточек товара
  • - Динамические роуты
  • - Передача параметров в роут
  • - Переиспользование роутов
  • - Хранение и сбор данных - геттеры и стейт
  • - Асинхронные действия в Actions
  • - Смена стейта через мутации
  • - Оптимизация с помощью модулей
  • - Подгрузка единичного товара через отдельный компонент
  • - Подключение слайдера
  • - Подгрузка картинок в слайд из отдельного хранилища
#6 Видеоуроки ~30 м.

REST API

REST – это архитектурный подход API, определяющий, как он должны выглядеть. На REST строится весь современный веб! Далее технлогия REST API будет использоваться во всех последующих приложениях

  • REST API
  • - В чем преимущества REST и почему это лучшее, что есть в вебе
  • - Подробнее про REST API
  • - Один сервер под все версии приложения
  • - Забираем данные с открытых API
  • - Делимся своим API
  • - Защита своего API - CORS / Tokens
  • - CORS дополнительные HTTP-заголовки
  • - Разграничение прав на разные запросы
  • - Все про токены и безопасность авторизаций
  • - Разница между REST API и graphql
  • - Применение graphql как типизация данных и прослойка между REST
#7 Видеоуроки ~1 ч.

Приложение Users CRM

Познакомимся с REST API, а также пагинацией данных и сортировкой. Научимся забирать данные со стороннего API через axios и get/post запросы

    • Приложение Users CRM
    • Приложение Users CRM
  • - Методы взаимодействия с сервером
  • - Различия между axios и fetch
  • - Установка axios базовое использование
  • - Отправка POST и GET запросов
  • - Подгрузка данных со стороннего API
  • - then и обработка ответов
  • - catch и обработка ошибок
  • - Сортировка полученных данных по возрасту, полу и имени
  • - Универсальный метод сортировки любых данных
  • - Пагинация полученных данных
  • - Постепенный показ содержимого через разные страницы
  • - Обработка ошибок
  • - Одновременное использование сортировки и пагинации
#8 Видеоуроки 40 м.

Создание новостной ленты

Сделаем подгрузку содержимого, реализуем свое API. Научимся обновлять данные на фронте, меняя их на сервере, и следить за “свежестью” данных

    • Создание новостной ленты
    • Создание новостной ленты
    • Создание новостной ленты
  • - Разворачиваем на стандартном хостинге мини сервер или пользуемся сторонним
  • - Получаем данные по REST API с своего сервера
  • - CORS - Разрешение на чтение своих данных другим пользователям
  • - Отображение данных от своего API
  • - Слежка за обновлением данных на бекенде и рендер данных на фронтенде
  • - Кнопка с обновлением данных и частичная перерисовка содержимого
  • - Добавляем кнопку “загрузить больше”
  • - Переносим логику “загрузить больше” в vuex.
    Через отдельный js файл для возможности переиспользования
  • - Пишем универсальный прелодер
  • - Отображаение показа загрузки при ожидании ответа от сервера
  • - Переиспользование компонента новостной ленты.
    Например, в CRM/CMS систему!
#9 Видеоуроки ~40 м.

Приложение GitHub Finder

Сторонние API, на примере самого популярного - GitHub. В этом приложении научимся отправлять и получать данные от api.github, как и раньше - по REST API

    • Приложение GitHub Finder
    • Приложение GitHub Finder
  • - Подключение к API github
  • - Создание UI компонента для поиска
  • - Слежка за данными из инпута
  • - Отправка запроса с пользовательскими данными
  • - Обработка запрос-ответа
  • - Отрисовка полученных данных
  • - Вывод репозиториев пользователей
  • - Обработка и показ ошибок
#10 Видеоуроки ~3 ч. 15 м.

SSR Блог на nuxt.js 🔥

Современный блог на nuxt.js + vue.js с рендерингом и админкой, полным SEO и небольшой CRM системой внутри, которая будет показывать все комментарии с возможностью сменять статус "опубликован/не опубликован", а также удалять "спам"

    • SSR Блог на nuxt.js 🔥
    • SSR Блог на nuxt.js 🔥
    • SSR Блог на nuxt.js 🔥
    • SSR Блог на nuxt.js 🔥
    • SSR Блог на nuxt.js 🔥
  • - —— Часть первая — фронтенд
  • - Зачем нужен nuxt.js
  • - SSR - поисковые системы всегда индексируют приложение
  • - Установка nuxt.js через npm и npx
  • - Универсальная структура проекта
  • - Изменяем конфигурации nuxt под себя
  • - Динамические Роуты
  • - Анимация между переходами по роутам
  • - Создание статических страниц
  • - Добавляем динамики - вывод статей
  • - Контактная форма - отправка данных на почту или телеграмм
  • - Подгрузка единичного поста
  • - Форма с комментариями к статье
  • - Глобальная регистрация UI компонентов
  • - Применение attrs и listeners
  • - Админ панель с добавлением / редактированием постов
  • - Модерирование комментариев. Управление состоянем "опубликован" и "удалить"
  • - —— Вторая часть — REST API Backend
  • - Firebase - регистрация нового проекта
  • - Установка axios
  • - Получение ключа для работы по API
  • - Подключение по API к firebase
  • - Добавление новых постов через POST запрос
  • - nuxtInit - GET запрос для сбора всех постов из базы данных
  • - Динамичный вывод единичного поста
  • - Добавление новых комментариев в базу данных
  • - Вывод комментариев для поста, под которым он был написан
  • - Запрос PUT - редактирование постов / комментариев
  • - Обработка изображений для поста
  • - запрос DELETE - удаление постов / комментариев
  • - Аутентификация/логин/регистрация
  • - Базовая защита админ панели
  • - Работа с токенами
  • - Хранение токена администратора
  • - Проверка на наличие токена при put/delete запросах
  • - Локальное хранилище на примере хранения токенов
  • - Хранение Сookie на примере хранения токенов по jwt
  • - —— Заключение — Полное SEO и деплой
  • - Настройка всех SEO тегов
  • - Смена title, description, :og тегов для динамических страниц
  • - Генерация robots.txt
  • - Генерация sitemap.xml
  • - Добавление яндекс метрики
  • - Добавление гугл аналитики
  • - Регистрация модулей для оптимизации аналитик
  • - Добавление приложения в поисковые системы Яндекс и Google
  • - Оптимизация js и вынос библтотек в vendors
  • - Настройка статической генерации
  • - Разница между generate и deploy
  • - Настройка nuxt.config для генерации по API (для обычного хостинга)
  • - Настройка конфига для деплоя (для сервера на node.js)
#11 Видеоуроки ~30 м.

Дополнительный модуль

Дополнительный модуль, где мы рассмотрим различные фичи, которые помогут в дальнейшей разработке!

  • Дополнительный модуль
  • - Использование шаблонизатора pug
  • - Использование любых других препроцессоров
  • - Использование TypeScript
  • - Настраиваем axios пишем универсальный скрипт для форм
  • - Отправляем данные c форм на почту
  • - Работаем с телеграм api. Отправляем данные с форм в телеграмм
  • - Оптимизация api запросов
  • - Плавные анимации между роутами
#12 Видеоуроки

Задачи с собеседований

Модуль с задачами с собеседований и их решением. Более 30 реальных вопросов и 10+ тестовых задач по Vue.js + js!

    • Задачи с собеседований
    • Задачи с собеседований
  • - Более 30 реальных вопросов
  • - 10+ тестовых задач по Vue.js
  • - Тестовые задачи по нативному JavaScript и их решение
Информация о курсе:
  • Последнее обновление: 04-08-2021
  • Количество домашних работ: 5
Информация о видеоуроках:
  • Продолжительность: ~21 ч
  • Количество модулей: 23
  • Количество видеоуроков: 166
  • В видеоуроки включено 73 статей
Записаться на курс

7 проектов в портфолио

Весь курс будет основан на практике, потому что именно благодаря практике идет реальное обучение.

Ниже показаны примеры выпускных приложений, которые будут разработаны на курсе!

  • SSR Blog. Nuxt.js + Vue.js
    SSR Blog. Nuxt.js + Vue.js
    • 🔥 SSR и Полная SEO оптимизация
    • 🔥 Авторизация, регистрация пользователей
    • Защита админ панели
    • Работа с токенами - JWT
    • Локальное хранилище
    • Хранение сессий
    • Markdown разметка
    Посмотреть Демо
  • Notify App
    Notify App
    • 🔥 Создание своего API
    • Работа с CORS - делимся своим API
    • LoadMore - постепенная подгрузка содержимого
    • Ленивая подгрузка содержимого
    • Хранение данных полученных от API в Vuex
    Посмотреть Демо
  • Users CRM
    Users CRM
    • 🔥 Сортировка входных данных
    • 🔥 Пагинация входных данных
    • Работа со сторонним API
    • Сбор данных через REST API
    Посмотреть Демо
  • GitHub Finder
    GitHub Finder
    • Работа с API GitHub
    • Вывод информации о пользователе
    • Вывод репозиториев пользователя
    • Обработка ошибок
    Посмотреть Демо
  • Shop App
    Shop App
    • Работа с Vue-Router
    • Создание динамических маршрутов
    • Храниение и взаимодействие с данными из Vuex
    • Работа с общим стейтом приложения
    Посмотреть Демо
  • Modals
    Modals
    • Переиспользование компонентов
    • Валидация полей
    • Скрытие элементов при клике за облость
    • Отслеживание клавиш
    • Отправка данных с форм на почту + в телеграмм канал
    Посмотреть Демо
  • Notes App
    Notes App
    • Полная настройка VUE CLI 3
    • Работа с emit
    • Компонентный подход
    • Разделение логики на компоненты
    • Фильтрация элементов
    • Удаление и редактирование элементов
    Посмотреть Демо

Ваш будущий сертификат

Сертификат vue-2 tocode

По окончании обучения вы получаете именной сертификат. Это отличное дополнение при трудоустройстве!

Дополнительная информация:

  • Сертификат доступен в электронном виде, в личном кабинете и в pdf формате;
  • Вместе с тем, у вас будет персональная ссылка с подтверждением оценки. Ссылку вы сможете добавить в резюме, тем самым подтвердив свой уровень подготовки.
Записаться на курс

Ответы на часто задаваемые вопросы:

  • Необходимый уровень для прохождения курса?
    Курс идет по ступеням - от легкого к более продвинутому.
    Поэтому на начальном этапе будет достаточно пониманимать базис JavaScript, а со всем остальным мы разберемся постепенно!

    Хорошей практикой будет, если вы уже верстали сайт с применением нативного js или jquery, тогда вы легко освоите vue.js! Обычно верстальщикам этот фреймворк дается проще всего!
  • Курс уже записан или это формат вебинара?
    Курс уже записан и полностью доступен (кроме того, переодический обновляется). Мне, как и многим, не нравится формат вебинаров, реальных знаний или практики на них мало. Поэтому был выбран формат записи коротких и структурированных видео, разбитых по модулям с плавной и понятной подачей материала. Без воды, только практика. Такой подход позволяет оставить цену на доступном уровне и значитльно повысить качество материала!
  • Есть расписание? Сколько длится курс?
    Расписания нету, смотрите, когда будет нужным. Есть только общие рекомендации следуя которым, обучение проходит за 4 недели.
  • После курса меня возьмут на позицию Frontend разработчика?
    Этот курс нацелен на успешное трудоустройство. В составлении этого курса мне помогал мой бывший коллега, который сейчас является рекрутером на позицию Frontend-Разработчик / Vue-разработчик. Поэтому у вас есть все шансы успешно устроиться на работу Frontend разработчиком. Более того, как показал опрос, 89% студентов уже нашли работу, большенство из которых сделали это уже в первые недели обучения.
    Опрос студентов vue.js
  • Можно ли оставить заявку сейчас и оплатить позже?
    Да, оставляя заявку вы также гарантированно бронируете место со скидкой, сохраняя текущую цену (при условии оплаты в течении 10 дней с момента отправки заявки)
  • Какой формат курса?
    Формат полноценного курса, более 150 видео, которые будут доступны сразу и навсегда. В сумме это 17 модулей. В 6 модулях есть домашнее задание, в двух видах: простое и более сложное. Также проверка дз и обратная связь.
  • Сколько человек уже записано?
    Телеграм группа по vue.js
    В общей группе курса на текущий момент (01.06.2021) свыше 140 человек. Так что скучно не будет!
  • Как будет осуществляться доступ к курсу?
    Доступ к курсу будет осуществляться из админ панели. Там вы сможете видеть комментарии других пользователей и оставлять свои, скачивать исходники и тд
    Оплачивая, доступ к курсу навсегда сохранятся у вас со всеми последующими обновлениями после завершения учебы.
  • Как происходит отправка домашних заданий?
    Отправка домашних заданий проиходит через личный кабинет, там же будет ревью и кол-во полученых баллов.

    В текущем курсе пять домашних заданий, почти каждое домашнее задание доступно в двух вариантах: простое и продвинутое.

    За каждое домашнее задание вы получаете определенное кол-во баллов, баллы влияют на оценку в сертификате, дз всегда можно пересдать

    Проверка домашних заданий происходит в среду и понедельник. Обычно, это не больше, чем 3 рабочих для с момента отправки домашнего задания.

    Домашние здания можно прислать на проверку и получить ревью в течении трех месяцев с момента записи на курс. После пяти месяцев вы также можете прислать домашнее задание, но только одним архивом, и получить ревью сразу по всем дз, которые будут присланы.
  • Если я что-то не пойму?
    В курсе обсуждаются продвинутые темы при этом - достаточно простым языком и по ступеням - от легкого к тяжелому. Поэтому не понять очень сложно. Есть группа в телеграмме, в которой могут помочь участники курса, в том числе и я. Если вопрос более глобальный - мы всегда можем списаться и закрыть пробелы в знаниях.