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

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

Узнать больше

Вышел новый курс!

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

Записавшись на текущий курс вы сможете выучить Vue.js 2 и с комфортом перейти на Vue.js 3!

Приятный бонус: записавшись на новый курс Vue.js 3 С нуля до результата вы получите текущий курс в подарок

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

Примеры
  • Пример 1:
  • - Если вы записываетесь на новый курс, то получаете текущий курс бесплатно
  • Пример 2:
  • - Если вы покупаете текущий курс, например, по цене 5900₽ , то сможете получить скидку на новый курс равный стоимости, по которой вы приобрели этот курс, а именно - 5990₽
  • - Этой скидкой вы сможете воспользоваться в любое время!
  • - Скидка распостраняется только на новый курс Vue.js 3 С нуля до результата
Узнать про новый курс Записаться на текущий курс -40%

Что вас ждёт в процессе обучения?

Знания и навыки

Более 170+ Уже записанных видео, минимум теории и максимум практики, которая закрепляется на домашних заданиях

Доступ к чату

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

Кейсы и проекты

7 современных приложений для вашего портфолио и GitHub

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


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

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


  • Разрабатывать полноценные приложения на стеке vue.js
    Разрабатывать полноценные приложения на стеке vue.js

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


  • Работе с API
    Работе с API

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


  • Состоянию приложения с VUEX
    Состоянию приложения с VUEX

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


  • Выбирать правильные инструменты и технологии
    Выбирать правильные инструменты и технологии

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


  • Оптимизировать Vue.js приложения
    Оптимизировать Vue.js приложения

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


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

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

Почему нужно учить 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

Основы vue.js

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

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

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

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

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

Основы VUE CLI

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

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

Vue Router

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

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

Vuex

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

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

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 через модули
#7

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

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

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

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

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

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

Приложение Shop

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

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

REST API

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

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

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

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

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

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

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

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

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

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

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

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)
#15

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

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

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

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

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

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

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

vue.js сертификат

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

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

Записаться на курс

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
    • Компонентный подход
    • Разделение логики на компоненты
    • Фильтрация элементов
    • Удаление и редактирование элементов
    Посмотреть Демо
Постоянный доступ

Пожизненный доступ к курсу со всеми последующими обновлениями

Единомышленники

Общение в чате с одногруппниками и всей командой курса

Обновления

Поддержание актуальности курса и обновления видео, если они устарели

Записаться на курс

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

  • Необходимый уровень для прохождения курса?

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

    Хорошей практикой будет, если вы уже верстали сайт с применением нативного js или jquery, тогда вы легко освоите vue.js! Обычно верстальщикам этот фреймворк дается проще всего!

  • Курс уже записан или это формат вебинара?

    Курс уже записан и полностью доступен (кроме того, переодический обновляется). Мне, как и многим, не нравится формат вебинаров, реальных знаний или практики на них мало. Поэтому был выбран формат записи коротких и структурированных видео, разбитых по модулям с плавной и понятной подачей материала. Без воды, только практика. Такой подход позволяет оставить цену на доступном уровне и значитльно повысить качество материала!

  • Можно ли оставить заявку сейчас и оплатить позже?

    Да, оставляя заявку вы также гарантированно бронируете место со скидкой, сохраняя текущую цену (при условии оплаты в течении 10 дней с момента отправки заявки)

  • После курса меня возьмут на позицию Frontend разработчика?

    Этот курс нацелен на успешное трудоустройство. В составлении этого курса мне помогал мой бывший коллега, который сейчас является рекрутером на позицию Frontend-Разработчик / Vue-разработчик. Поэтому у вас есть все шансы успешно устроиться на работу Frontend разработчиком.

  • Какой формат курса?

    Формат полноценного курса, более 150 видео, которые будут доступны сразу и навсегда. В сумме это 17 модулей. В 6 модулях есть домашнее задание, в двух видах: простое и более сложное. Также проверка дз и обратная связь.

  • Есть расписание? Сколько длится курс?

    Расписания нету, смотрите, когда будет нужным. Есть только общие рекомендации следуя которым, обучение проходит за 3 недели.

  • Как будет осуществляться доступ к курсу?

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

  • Сколько человек уже записано?

    В группе телеграмм на текущий момент свыше 120 человек. Так что скучно не будет!

  • Если я что-то не пойму?

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

Записаться на курс