Vue.js 3. Разработка клиентских приложений [HTML Academy]
Начните обучение прямо сейчас и двигайтесь с комфортной скоростью
Курс подходит разработчикам, которые хотят повысить свой профессиональный уровень, даже если у них мало времени.
Для прохождения курса достаточно иметь базовые знания HTML, CSS, JS.
На курсе мы разберем нюансы работы с фреймворком на примере учебного проекта VueWork и вы создадите свой собственный проект — конструктор пиццы VuePizza.
Зачем изучать Vue.js
Vue.js — фреймворк с открытым исходным кодом.
Позволяет создавать пользовательские интерфейсы UI и одностраничные приложения любой степени сложности
Требования для начала курса:
Знание JavaScript ES2020
Программное обеспечение, необходимое для работы с проектом:
Git и Github
Node.js
Docker
WSL2
Windows: предпочтительно 10 или 11 (64-bit) / Mac OS 11+
На курсе используется библиотека Pinia, а учебные проекты построены на Vite.
Программа курса
Раздел 1
Основы синтаксиса и базовых возможностей Vue.js
Разберём первоначальную настройку проекта, архитектуру, базовый синтаксис, строение компонентов и шаблонизатор Vue.js.
Особенности фреймворка Vue.js.
Начало работы с Vue.js.
Отображение компонентов.
Создание шаблона для компонента счётчика.
Логика компонентов.
Условная отрисовка и отрисовка списков.
3 задания, 21 демо.
Раздел 2
Взаимодействие между компонентами Vue.js
Рассмотрим передачу данных и взаимодействие между компонентами Vue.js.
Виды и обработка событий.
Виды взаимосвязей между компонентами.
Слоты и динамический контент.
Двустороннее связывание между компонентами.
3 задания, 9 демо.
Раздел 3
Углублённое понимание Vue.js
Углубимся в работу фреймворка Vue.js, добавим автоматические лейауты и ма ршрутизатор.
Реактивность Vue.js.
Маршрутизатор vue-router. Автоматическая загрузка шаблонов.
Пользовательские директивы и плагины. Рендер-функции.
3 задания, 14 демо.
Раздел 4
Менеджер состояния
Разберём, как хранить глобальное состояние приложения в одном месте.
Что такое менеджер состояния.
Состояние хранилища.
Получение вычисляемых данных из хранилища.
Методы хранилища.
5 заданий, 11 демо.
Раздел 5
Работа с сетью
Посмотрим, как получать данные по сети и реализовать авторизацию.
Создание и подключение API-сервиса.
Создание и подключение сервиса для работы с токеном авторизации.
Настройка Vite для работы с сервером.
Создаём подключение к серверу.
3 задания, 10 демо.
Раздел 6
Анимации Vue.js
Научимся добавлять анимации в приложения.
Переходы и анимации.
Хуки анимаций.
Анимация списков.
1 задание, 5 демо.
Раздел 7
Тестирование приложения
Научимся тестировать приложение на Vue.js.
Обзор Vue Test Utils и Vitest.
Глупые и умные компоненты. mount vs shallowMount.
Программирование через тестирование.
1 задание, 4 демо.
Раздел 8
Итоговый раздел
Подведём итоги курса и расскажем, что изучать дальше.
Итоги и советы.
Итоговый тест по курсу.
Формат курса: теория, разбор кейсов, личный проект
Гибкие сроки: начинайте прямо сейчас и учитесь с комфортной скоростью
Типовые задачи, которые вы сможете решать
Начните обучение прямо сейчас и двигайтесь с комфортной скоростью
Курс подходит разработчикам, которые хотят повысить свой профессиональный уровень, даже если у них мало времени.
Для прохождения курса достаточно иметь базовые знания HTML, CSS, JS.
На курсе мы разберем нюансы работы с фреймворком на примере учебного проекта VueWork и вы создадите свой собственный проект — конструктор пиццы VuePizza.
Зачем изучать Vue.js
Vue.js — фреймворк с открытым исходным кодом.
Позволяет создавать пользовательские интерфейсы UI и одностраничные приложения любой степени сложности
Требования для начала курса:
Знание JavaScript ES2020
Программное обеспечение, необходимое для работы с проектом:
Git и Github
Node.js
Docker
WSL2
Windows: предпочтительно 10 или 11 (64-bit) / Mac OS 11+
На курсе используется библиотека Pinia, а учебные проекты построены на Vite.
Программа курса
Раздел 1
Основы синтаксиса и базовых возможностей Vue.js
Разберём первоначальную настройку проекта, архитектуру, базовый синтаксис, строение компонентов и шаблонизатор Vue.js.
Особенности фреймворка Vue.js.
Начало работы с Vue.js.
Отображение компонентов.
Создание шаблона для компонента счётчика.
Логика компонентов.
Условная отрисовка и отрисовка списков.
3 задания, 21 демо.
Раздел 2
Взаимодействие между компонентами Vue.js
Рассмотрим передачу данных и взаимодействие между компонентами Vue.js.
Виды и обработка событий.
Виды взаимосвязей между компонентами.
Слоты и динамический контент.
Двустороннее связывание между компонентами.
3 задания, 9 демо.
Раздел 3
Углублённое понимание Vue.js
Углубимся в работу фреймворка Vue.js, добавим автоматические лейауты и ма ршрутизатор.
Реактивность Vue.js.
Маршрутизатор vue-router. Автоматическая загрузка шаблонов.
Пользовательские директивы и плагины. Рендер-функции.
3 задания, 14 демо.
Раздел 4
Менеджер состояния
Разберём, как хранить глобальное состояние приложения в одном месте.
Что такое менеджер состояния.
Состояние хранилища.
Получение вычисляемых данных из хранилища.
Методы хранилища.
5 заданий, 11 демо.
Раздел 5
Работа с сетью
Посмотрим, как получать данные по сети и реализовать авторизацию.
Создание и подключение API-сервиса.
Создание и подключение сервиса для работы с токеном авторизации.
Настройка Vite для работы с сервером.
Создаём подключение к серверу.
3 задания, 10 демо.
Раздел 6
Анимации Vue.js
Научимся добавлять анимации в приложения.
Переходы и анимации.
Хуки анимаций.
Анимация списков.
1 задание, 5 демо.
Раздел 7
Тестирование приложения
Научимся тестировать приложение на Vue.js.
Обзор Vue Test Utils и Vitest.
Глупые и умные компоненты. mount vs shallowMount.
Программирование через тестирование.
1 задание, 4 демо.
Раздел 8
Итоговый раздел
Подведём итоги курса и расскажем, что изучать дальше.
Итоги и советы.
Итоговый тест по курсу.
Формат курса: теория, разбор кейсов, личный проект
Гибкие сроки: начинайте прямо сейчас и учитесь с комфортной скоростью
Типовые задачи, которые вы сможете решать
- Создание одностраничного лендинга
- Создание многостраничных сайтов и интернет магазинов
- Создание сложных веб приложений для различных целей
- Проектирование интерфейсов с помощью компонентного подхода
- Манипулирование и передача данных внутри фронтенд-приложения
- Работа с маршрутизатором Vue Router
- Работа с Vue DevTools
- Работа с сервером
- Переходы и анимации во Vue.js
- Тестирование фронтенд компонентов
https://htmlacademy.ru/levelup/vue