Что будет на курсе и как его проходить

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

Что вы узнаете:

• как развернуть проект с нуля при помощи Vite;
• какие тонкости существуют при работе с компонентами;
• какие инструменты помогают ускорить процесс разработки;
• как грамотно применять Pinia для централизованного управления данными;
• какие особенности навигации между страницами возникают при использовании Vue-router;
• как организовать взаимодействие с сервером;
• как создавать модульные тесты при помощи Vitest и Vue Test Utils.

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

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

Взаимодействие между компонентами Vue.js. Изучим передачу данных и взаимодействие компонентов Vue.js. Разберёмся, что такое слоты и как ими пользоваться. Научимся подписываться на события и реализуем drag-and-drop в проектах. Поговорим о двустороннем связывании данных и передаче параметров в дочерние компоненты.

Углублённое понимание Vue.js. Погрузимся в механизмы работы фреймворка: разберём реактивность компонентов и виртуальный DOM. Проведём рефакторинг стилей и компонентов, рассмотрим маршрутизатор vue-router и автоматическое создание шаблонов. Познакомимся с пользовательскими директивами, плагинами, глобальными компонентами и рендер-функциями.

Менеджер состояния. Познакомимся с менеджерами состояния и начнём использовать Pinia. Установим этот менеджер, добавим хранилище данных в проект и настроим начальное состояние. Также разберём геттеры и их применение.

Работа с сетью. Изучим протокол HTTP и способы работы с ним в наших проектах. Создадим сервисы для HTTP-запросов и CRUD-операций, реализуем аутентификацию и авторизацию, а затем заменим тестовые данные реальными данными с сервера.

Анимации во Vue.js. Разберём, как реализовать переходы и анимации в приложениях на Vue. Попрактикуемся в создании анимаций на CSS и JS. Оживим приложение, добавив анимации при переключении маршрутов, появлении всплывающих окон и добавлении элементов.

Тестирование приложения. Выясним, зачем нужно тестирование, что стоит покрывать тестами, а что нет. Разберём фреймворк Vitest и библиотеку Vue Test Utils, а также научимся тестировать приложения на Vue.

Итоговый раздел. Подведём итоги курса и обсудим пути дальнейшего развития.

Как проходит обучение

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

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

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

• Учебный проект — система управления задачами, похожая на Trello. На примере этого проекта мы пошагово раскрываем теорию и демонстрируем её применение на практике. К завершению курса у вас будет полностью функционирующее приложение.
• Самостоятельный проект — интернет-магазин, в котором пользователь сможет выбрать товары, настроить параметры и оформить заказ. Для проверки своего решения вы сможете воспользоваться подготовленной эталонной реализацией.

Вся работа ведётся в директории frontend, и все изменения вносятся именно в неё, если не указано иное. Поэтому, встретив ссылку на файл src/main.js, имейте в виду — он расположен по пути frontend/src/main.js.

Для лучшего усвоения материала рекомендуем параллельно с курсом изучать дополнительные источники, например документацию Vue.js. Также полезно экспериментировать с компонентами и задавать авторам вопросы о том, почему что-то работает определённым образом.

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