Курс по Vue.js 3
С нуля до результата

Овладей новой версией трендового фреймворка
на курсе «Vue.js 3 - практическое руководство
с нуля до результата!»‎

  • Длительность 5 недель
  • Доступ к курсу Навсегда
  • Старт потока Скоро

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

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

0% воды и 100% практических примеров, которые действительно пригодятся в работе.

Подготовка к интервью

Курс нацелен на успешное прохождение интервью и дальнейшее трудоустройство.

Доступ к чату

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

Домашние задания

Проверка домашних заданий, общие рекомендации и консультации на всех этапах.

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

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

Сертификат

Именной сертификат об окончании курса с общими рекомендациями и оценкой.

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


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

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


  • Composition API на Vue 3
    Composition API на Vue 3

    Самое значительное нововведение новой версии это Composition API. Вы также изучите Options API тк на курсе мы писать код в Options и Composition API


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

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


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

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


  • REST API
    REST API

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


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

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


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

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


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

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

Новый формат: курс и вебинары

1. Видеоуроки

Короткие и структурированные видео, разбитые по модулям с плавной и понятной подачей материала. Без воды, только практика. Видео уже записанны и будут доступны сразу после записи.

2. Вебинары

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

Такой подход позволяет значительно повысить качество материала, ускорить процесс обучения!

  • Длительность 5 недель
  • Доступ к курсу Навсегда
  • Старт Скоро
Забронировать место со скидкой
Подготовительный материл и часть видеоуроков доступны сразу
Vue.js 3 с нуля до результата
80 000₽

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

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

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

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

Видеоуроки ‑ cхема обучения:

#1

Основы Vue.js 3

Основные моменты и нововведения в vue.js 3

  • - Про визуальные фреймворки или почему важно писать все самому
  • - Разница между Vue.js и React.js
  • - Новые возможности Vue.js 3
  • - Сравнение Vue.js 3 и Vue.js 2
  • - Work Flow - Настройка редактора
  • - Work Flow - Настройка необходимых плагинов
  • - Work Flow - Настройка конфигов
  • - Work Flow - Code style
  • - Инициализация vue.js
  • - Mount на идентификатор
  • - Динамическая смена данных в data
  • - Работа с объектами
  • - Methods и их применение
  • - Вычисляемые свойства - Computed
  • - Работа с Boolean значениями
  • - Дериктива v-if - условные реднеринг
  • - Привязка атрибутов через v-bind
  • - Применение v-model
  • - Циклы и вывод больших списков
  • - Хуки жизненного цикла вью компонентов
#2

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

Напишем заметочник, где применим все знания из "Основы Vue.js 3"

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

Своя сборка на VUE CLI и Vue 3

В текущем модуле мы создадим свою сборку, которую будем переиспользовать во всех последующих проетах!

  • - Преимущества и использование VUE CLI
  • - Установка и знакомство с node.js
  • - Установка VUE CLI через npm
  • - Чем плох флаг -g
  • - Установка глобальных пакетов через npx
  • - Лучшая структура проектов
  • - Подключение SCSS
  • - Подключение шрифтов локально и через CDN
  • - Настройка для не стандартных билдов
  • - Настройка хешей и карт стилей/скриптов
#4

Vue-router - Динамическая перерисовка

Новый взгляд на роутеринг с Vue.js 3. Научимся строить простые и вложенные маршруты, перерисовывать страницы в зависимости от пути

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

Vuex + Vue 3

Для быстрого и удобного взаимодействия данные будут храниться внутри приложения. Разберемся как использовать VUEX с Vue.js второй и третьей версии

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

REST API

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

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

Приложение Clash of Clans

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

  • - Настройка vuex и vue-router
  • - Создание динамического меню
  • - Активная ссылка по текущему роуту
  • - Создание компонента карточек
  • - Хранение картинок
  • - Использование Слотов для карт
  • - Переиспользование компонентов
  • - Хранение и динамическое взаимодействие с картинками в приложении
  • - Знакомство с сидерами (seeders)
  • - Оптимизация компонентов - хранение всех данных в json массиве
  • - Перенос данных во vuex
  • - Хранение и сбор данных - геттеры и стейт
  • - Асинхронные действия в Actions
  • - Работа с сторонними плагинами на примере слайдера
  • - Подключение слайдера со списком персонажей
  • - Адаптация приложения под мобильные устройства
  • - Подгрузка единичного персонажа через отдельный компонент
#8

Бонус: Git + GitHub

Поскольку в курсе будет несколько выпускных проектов, то я посчитал нужным добавить видео по работе с GIT, для того чтобы вы могли организовать свое портфолио на GitHub и GitHub Pages, что увеличит шансы найти работу и получить больше заказчиков!

  • - GIT Введение
  • - Создание первого коммита
  • - Создание репозитория на GitHub
  • - Загрузка проекта в Ваш репозиторий на GitHub
  • - Добавление новых коммитов
  • - Настройка GitHub Pages для демонстрации работы приложения
  • - Загрузка Вашего Демо на GitHub Pages
#9

Star Wars Wiki

TypeScript + Composition API, работа с открытым API звездных войн. Это будет завершающий модуль, в котором мы раскроем весь потенциал вью 3 в связке TS + Composition API!

  • - Текущий модуль будет корректироваться, точная программа будет составленна до 1 марта
#10

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

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

  • - Настраиваем axios пишем универсальный скрипт для форм
  • - Отправляем данные c форм / модалок к себе на почту
  • - Телеграм api. Отправляем данные с форм в телеграмм
  • - Плавные анимации между роутами

Программа вебинаров:

#1 Скоро

Основы Vue.js 3 и знакомство с курсом

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

  • - Про личный кабинет и отправку домашних заданий
  • - Получение сертификата по окончании курса
  • - Лучшие практики прохождения курса
  • - Вводные материалы
  • - Зачем используется Vue.js
  • - Что такое реактивность
  • - Зачем нужен MVC на фротенде
#2 2 Мая

Composition API

Знакомство с новым Composition API на примере написания модальных окон, форм и обработчиков

  • - Знакомство с setup()
  • - Реактивные ссылки
  • - Методы и комьютеды в Composition API
  • - Динамические атрибуты
  • - Модель для работы с формами
  • - Текстовый инпут / Текстарея
  • - Чекбоксы / Радио кнопки / Селекты
  • - UI компонент модального окна
  • - Использование слотов на практике
  • - Закрытие модального окна по клику на крестик, область или ESC
  • - Валидация входящих параметров
  • - Связь дочерних компонентов
  • - "Шаринг" стейта приложения
  • - Использование телепорта для модальных окон
  • - Учимся переиспользовать модальные окна из проекта в проект
#3 9 Мая

Vue-Twitter

Начнем писать клон твиттера с использованием Composition API

  • - Настройка markdown разметки
  • - Использование md для создание твита
  • - Seeders для хранения данных
  • - Рендеринг твитов
  • - Написание своего плагина для сортировки всех сообщений
  • - Сортировка данных по дате создания и имени
  • - Универсальный метод сортировки любых данных
  • - Обработка ошибок
  • - Перенос данных в vuex
  • - Жизненные циклы компонентов
  • - Хранение и сбор данных - геттеры и стейт
  • - Асинхронные действия в Actions
  • - Смена стейта через мутации
#4 16 Мая

Firebase по REST API

Научимся отправлять запросы с фронтенда на Firebase, используя asiox или fetch, также получать ответ и заносить данные в VUEX

  • - Методы взаимодействия с сервером
  • - Различия между axios и fetch
  • - Установка axios базовое использование
  • - Firebase - регистрация нового проекта
  • - Запрос PUT - редактирование постов / комментариев
  • - Установка axios
  • - Получение ключа для работы по API
  • - Подключение по API к firebase
  • - Добавление новых постов через POST запрос
  • - Отправка POST и GET запросов
  • - Подгрузка данных со стороннего API
  • - then и обработка ответов
  • - catch и обработка ошибок
  • - Отправка данных в vuex
#5 23 Мая

Подведение итогов

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

  • - Текущий вебинар будет корректироваться, точная программа будет составленна до 10 Апреля

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

Vue.js 3 сертификат tocode

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

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

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

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

4 Выпускных проекта, плюс бонус - 7 проектов из курса "Vue.js с нуля до про"

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

  • Twitter
    Twitter
    • 🔥  Composition API + Vue 3
    • Markdown разметка
    • Использование Firebase по REST API
    Посмотреть Демо
  • Star Wars Wiki
    Star Wars Wiki
    • 🔥  Composition API + Vue 3
    • 🔥  TypeScript
    • Работа с API по техлогии REST
    • Отправка запросов на апи через отдельные сервисы
    • Хранение данных полученных от сервера
    • Постраничная пагинация элементов
    Посмотреть Демо
  • Clash Of Clans
    Clash Of Clans
    • Vue-Router в связке Vue.js 3
    • Динамических маршрутов
    • Храниение и взаимодействие с данными из Seeders
    • Слайдер с персонажами
    Посмотреть Демо
  • Notes App
    Notes App
    • Полная настройка VUE CLI 3 на Vue 3
    • VUEX + Vue 3
    • Создание глобальных конфигов
    • Передача данных между компонентами
    • Разделение логики по компоненты
    • Локальное хранилише
    • Фильтрация элементов
    Посмотреть Демо
  • Notify App
    Notify App
    • Создание своего API
    • Работа с CORS - делимся своим API
    • LoadMore - постепенная подгрузка содержимого
    • Ленивая подгрузка содержимого
    • Хранение данных полученных от API в Vuex
    • Бонус из курса «Vue.js с нуля до про»
    Посмотреть Демо
  • Users CRM
    Users CRM
    • Работа с сторонним API
    • Сбор данных через REST API
    • Сортировка входных данных
    • Пагинация входных данных
    • Бонус из курса «Vue.js с нуля до про»
    Посмотреть Демо
  • GitHub Finder
    GitHub Finder
    • Работа с API GitHub
    • Вывод информации о пользователе
    • Вывод репозиториев пользователя
    • Обработка ошибок
    • Бонус из курса «Vue.js с нуля до про»
    Посмотреть Демо
  • Shop App
    Shop App
    • Работа с Vue-Router
    • Создание динамических маршрутов
    • Храниение и взаимодействие с данными из Vuex
    • Работа с общим стейтом приложения
    • Бонус из курса «Vue.js с нуля до про»
    Посмотреть Демо
  • Modals
    Modals
    • Переиспользование компонентов
    • Валидация полей
    • Скрытие элементов при клике за облость
    • Отслеживание клавиш
    • Отправка данных с форм на почту + в телеграмм канал
    • Бонус из курса «Vue.js с нуля до про»
    Посмотреть Демо
  • Notes App Vue.js 2
    Notes App Vue.js 2
    • Полная настройка VUE CLI 3
    • Работа с emit
    • Компонентный подход
    • Разделение логики на компоненты
    • Фильтрация элементов
    • Удаление и редактирование элементов
    • Бонус из курса «Vue.js с нуля до про»
    Посмотреть Демо
Навсегда

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

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

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

Второй курс Бесплатно!

Запишитесь сейчас чтобы получить
курс по «Vue.js 2 С нуля до про» бесплатно

170+ видео, 7 выпускных проектов, Options Api все это будет доступно сразу и навсегда!

Узнать больше
  • Чтобы получить курс «Vue.js 2 С нуля до про»
    бесплатно нужно:
  • - Записаться на текущий курс
  • Дополнительно:
  • - Вам не нужно покупать курс «Vue.js 2 С нуля до про», он будет доступен бесплатно в личном кабинете.
Записаться на курс

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