[Яндекс Практикум] Vue.js для разработчиков

​

За 2 месяца освоите работу с фреймворком Vue.js и научитесь создавать полноценные приложения на его
Научитесь создавать приложения на Vue.js: с нуля до продакшна
Будете тренироваться в онлайн-тренажере в любое время
Увеличите количество вакансий, на которые сможете откликаться
Сможете тестировать и разворачивать написанное приложение
Выполните 4 проекта, которые можно добавить в портфолио
Получите удостоверение о повышении квалификации

Vue — фреймворк, который прост в освоении и востребован на рынке
Vue.js открывает возможности как для работы в штате, так и для фриланс-проектов
Фреймворк позволяет быстро создавать прототипы и разрабатывать приложения, что особенно ценно для стартапов и проектов с жёсткими сроками

Это курс для разработчиков с опытом работы на JavaScript, HTML или CSS

• Начинающие фронтенд-разрабочики
  Освоите востребованный фреймворк, чтобы научиться быстро создавать интерактивные веб-приложения
• Опытные React- и Angular-разработчики
  Расширите свой стек технологий, чтобы решать специфические задачи
• Тимлиды
  Разберётесь в архитектуре Vue-проектов, чтобы использовать фреймворк для масштабирования

За 2 месяца вы научитесь
Создавать сложные SPA-приложения, как в продакшне
Подключать Vue к любому бэкенду
Разбираться, как выжимать максимум из производительности приложения
Использовать современный стек: Vite, Pinia, TypeScript
Готовить и выкатывать проекты в продакшен
Понимать, когда стоит выбрать Nuxt и как использовать его для SSR
Мигрировать проект с Vue 2 на Vue 3 без боли
Создавать собственные composables и использовать VueUse для гибкой архитектуры
Интегрировать AI-инструменты, чтобы ускорять и упрощать разработку

Программа курса
Она рассчитана на 2 месяца, в среднем учёбе нужно уделять 10–13 часов в неделю

Инструменты и основы Vue 3
1. Современный Vue 3: композиция вместо наследования: освоите Composition API — современный подход в Vue 3 для управления реактивностью и создания переиспользуемых компонентов по принципам KISS и DRY.
2. TypeScript как основа надёжности: научитесь типизировать компоненты, пропсы и события, использовать дженерики и утилиты TypeScript для повышения стабильности и предсказуемости кода.
3. Коммуникация компонентов: разберёте способы взаимодействия через props, emits, slots и паттерн provide/inject для гибкого обмена данными между компонентами.
4. Инструменты качества: настроите ESLint, выполните рефакторинг и напишете unit-тесты с Vitest и Vue Test Utils для обеспечения качества и надёжности кода.
Проект: создадите переиспользуемую библиотеку Vue-компонентов для построения интерфейсов. В неё войдут базовые элементы форм — поля ввода, кнопки, селекты — и составные компоненты, такие как карточки и индикаторы. Реализуете систему темизации с использованием механизма provide/inject и обеспечите полную типизацию на TypeScript. Все компоненты будут спроектированы с учётом их дальнейшего применения в проекте менеджера задач.

Архитектура Vue-приложений
1. Composables — переиспользуемая бизнес-логика: освоите паттерн Composables для выделения и повторного использования бизнес-логики, включая работу с API, состоянием форм и обработкой ошибок.
2. Состояние приложения с Pinia: внедрите менеджер состояний Pinia и научитесь централизованно управлять данными приложения с типизацией для масштабируемых проектов.
3. Маршрутизация и навигация: настроите маршрутизацию с Vue Router, реализуете ленивую загрузку, навигационные хуки и обработку ошибок вроде «404 Not Found».
4. Сложные формы и валидация: создадите динамические формы с VeeValidate, добавите валидацию, состояния загрузки и успешной отправки для улучшения пользовательского опыта.
Проект: разработаете веб-приложение для управления проектами и задачами с возможностью командной работы. Реализуете систему проектов, доску задач, фильтрацию и поиск. Используете компоненты из первой библиотеки, добавите управление состоянием через Pinia, маршрутизацию и сложные формы с валидацией.

Производительность и продвинутые паттерны
1. Оптимизация рендеринга и производительности: освоите техники ускорения Vue-приложений: использование v-memo, ленивую загрузку и профилирование через Vue DevTools для выявления узких мест.
2. VueUse и реактивные утилиты: научитесь применять готовые composable-функции из VueUse для работы с браузерными API и создавать собственные хуки для ускорения разработки.
3. Миграция и работа с legacy: разберёте стратегии миграции с Vue 2 на Vue 3, включая Compatibility Build, и научитесь совмещать старый и новый код в одном проекте.
4. AI в разработке: интегрируете AI-инструменты в процесс разработки для генерации кода, тестов и ускоренного код-ревью.
Проект: улучшите производительность и пользовательский опыт приложения из второго модуля. Добавите виртуализацию списков, ленивую загрузку компонентов и кеширование данных с помощью VueUse. Также реализуете офлайн-режим для работы приложения без подключения к сети.

Продакшн и реальные сценарии
1. Продакшен-сборка и деплой: подготовите приложение к продакшну, настроите Vite для оптимальной сборки, примените код-сплиттинг и tree-shaking, а также развернёте проект на облачной платформе.
2. CI/CD и автоматизация: настроите автоматические пайплайны CI/CD для тестирования, сборки и деплоя приложения, обеспечивая стабильный и быстрый релиз новых версий.
3. Серверный рендеринг и Nuxt: освоите SSR и SSG с помощью Nuxt 3, улучшите SEO и производительность приложения и научитесь выбирать подходящий тип рендеринга под задачу.
4. Архитектурные решения для масштабирования: изучите принципы проектирования масштабируемой фронтенд-архитектуры и научитесь подбирать технологический стек под бизнес-задачи на реальных кейсах.
Проект: подготовите приложение к промышленной эксплуатации. Выполните миграцию на Nuxt 3 для реализации SSR/SSG, настроите полный CI/CD-пайплайн с автоматическим тестированием и деплоем. Завершите работу развертыванием приложения на облачной платформе.