Stepik О курсе
Подробнее
В этом курсе мы изучим Vue, Vue Router и Pinia, создавая два полноценных приложения. Мы сделаем приложение для отображения прогноза погоды и Saas сервис хранения веб закладок. Этот курс идеально подойдёт тем, кто уже знаком с основами HTML, CSS и JavaScript и готов начать работать с одним из популярных frontend фреймворков — Vue.js. Если вы уже имеете опыт работы с другими JavaScript фреймворками, этот курс поможет вам быстро освоить Vue и его экосистему.
Курс ориентирован на практическое освоение, и весь теоретический материал будет подкреплён реальными проектами. Вместо стандартных примеров, мы будем работать с настоящими API и создавать приложения, которые имитируют реальные сценарии. В процессе мы подробно изучим Vue Router для работы с маршрутами и Pinia для управления состоянием. Также в курсе предусмотрено множество упражнений, которые помогут вам углубить понимание технологий и доработать проекты, созданные на занятиях.
Требования
Что нужно для старта
- Знание JavaScript, Знание TypeScript будет плюсом, Знание HTML и CSS
Результат
Что вы получите
- Создавать проект на Vue
- Понимать реактивность данных
- Работать с Vue Router
- Использовать Pinia
- Управлять состоянием данных в компонентах
- Использовать Reactive API
- Писать в стиле Composition API
- Взаимодействовать с API
- Создавать формы на Vue
- Работать с жизненным циклом компонентов
- Использовать Vue с TypeScript
- Пользоваться встроенными компонентами
- Знать синтаксис шаблонов Vue и директивы
Аудитория
Для кого этот курс
- Для frontend разработчиков
Содержание
15 занятийПрограмма курса
№ТемаЧто внутри
01Введение
- Vue и Pinia
- Как устроен курс
- Обзор проектов
- Обзор курсов
- Перенос курса
02Настройка окружения
- Настройка окружения
- Настройки VSCode
- Установка Node
- О работе NVM
- Создание проекта
03Основы
- Обзор проекта
- Структура компонент
- Настройка eslint
- Шаблоны
- Bind атрибутов
- JS в шаблонах
- Composition API
- Тест - Основы
04Компоненты
- Макет проекта
- Упражнение - Глобальный стиль
- Что такое компоненты
- Первый компонент
- Стилизация
- Slot
- Несколько slot
- Декомпозиция на компоненты
- Упражнение - Сборка app
- Тест - Компоненты
05Свойства и события
- Компонент статистики
- defineProps
- withDefaults
- v-bind
- Использование svg
- Упражнение - Ввод города
- Events
- defineEmits
- Валидация emits
- Наследование атрибутов
- Тест - Свойства и события
06Реактивность
- Как работает реактивность
- Proxy
- ref
- reactive
- Unwrap
- nextTick
- Упражнение - Состояние редактирования
- computed
- Тест - Реактивность
07Шаблоны и модели
- v-if
- v-else
- v-show
- Упражнение - Input
- v-for
- Упражнение - Список данных
- Наивная реализация input
- v-model
- defineModel
- Тест - Шаблоны и модели
08Жизненный цикл
- Lifecycle Hooks
- Примеры Hooks
- watch
- API погоды
- Получение данных
- keyup
- Упражнение - Привязка данных
- Упражнение - Обработка ошибок
- Динамические стили
- Упражнение - Карточка погоды
- Упражнение - Вывод прогноза
- Тест - Жизненный цикл
09Custom directive и Provide Inject
- Динамические классы
- Свои директивы
- Упражнение - Левая панель
- Рефакторинг компонент
- Provide Inject
- Реализация с Provide Inject
- Symbol key
- Упражнение - Передача данных
- Упражнение - Финал приложения
- Тест - Custom directive и Provide Inject
10Переход на TypeScript
- Почему TypeScript
- Рекомендуемый курс
- Создание приложения
- Обзор проекта
- Запуск API
- Работа с API
- Подготовка стилей
- Типизация defineProps
- Типизация ответа API
- Тест - Переход на TypeScript
11Pinia
- Почему Pinia
- Установка Pinia
- Store профиля
- Actions
- Упражнение - Перенос в профиль
- Добавление axios
- Упражнение - Store для категорий
- Упражнение - Вывод списка
- Создание категории
12Vue Router
- Установка Vue Router
- RouterView
- children
- Упражнение - Страница входа
- useRouter
- LazyLoading
- Vue DevTools
- Active links
- Динамические пути
- Упражнение - Главная страница
- Helpers
- onBeforeRouteUpdate
- Упражнение - Получение закладок
- NotFound
- Тест - Vue Router
13Авторизация
- Типизация defineModel
- Работа с формой
- Отправка запроса на авторизацию
- JWT
- Хранения в LocalStorage
- NavigationGuard
- Данные за авторизацией
- Упражнение - Редактирование категории
- Упражнение - Удаление категории
- Упражнение - Компонент закладки
- Упражнение - Вывод списка закладок
- Типизация defineEmits
- Тест - Авторизация
14Встроенные компоненты
- Упражнение - добавление закладки
- useTemplateRef
- Component Registration
- Async Components
- Teleport
- Transition
- Сборка для production
- Тест - Встроенные компоненты
15Заключение
- Куда двигаться дальше
- Финальное тестирование
01Введение
- Vue и Pinia
- Как устроен курс
- Обзор проектов
- Обзор курсов
- Перенос курса
02Настройка окружения
- Настройка окружения
- Настройки VSCode
- Установка Node
- О работе NVM
- Создание проекта
03Основы
- Обзор проекта
- Структура компонент
- Настройка eslint
- Шаблоны
- Bind атрибутов
- JS в шаблонах
- Composition API
- Тест - Основы
04Компоненты
- Макет проекта
- Упражнение - Глобальный стиль
- Что такое компоненты
- Первый компонент
- Стилизация
- Slot
- Несколько slot
- Декомпозиция на компоненты
- Упражнение - Сборка app
- Тест - Компоненты
05Свойства и события
- Компонент статистики
- defineProps
- withDefaults
- v-bind
- Использование svg
- Упражнение - Ввод города
- Events
- defineEmits
- Валидация emits
- Наследование атрибутов
- Тест - Свойства и события
06Реактивность
- Как работает реактивность
- Proxy
- ref
- reactive
- Unwrap
- nextTick
- Упражнение - Состояние редактирования
- computed
- Тест - Реактивность
07Шаблоны и модели
- v-if
- v-else
- v-show
- Упражнение - Input
- v-for
- Упражнение - Список данных
- Наивная реализация input
- v-model
- defineModel
- Тест - Шаблоны и модели
08Жизненный цикл
- Lifecycle Hooks
- Примеры Hooks
- watch
- API погоды
- Получение данных
- keyup
- Упражнение - Привязка данных
- Упражнение - Обработка ошибок
- Динамические стили
- Упражнение - Карточка погоды
- Упражнение - Вывод прогноза
- Тест - Жизненный цикл
09Custom directive и Provide Inject
- Динамические классы
- Свои директивы
- Упражнение - Левая панель
- Рефакторинг компонент
- Provide Inject
- Реализация с Provide Inject
- Symbol key
- Упражнение - Передача данных
- Упражнение - Финал приложения
- Тест - Custom directive и Provide Inject
10Переход на TypeScript
- Почему TypeScript
- Рекомендуемый курс
- Создание приложения
- Обзор проекта
- Запуск API
- Работа с API
- Подготовка стилей
- Типизация defineProps
- Типизация ответа API
- Тест - Переход на TypeScript
11Pinia
- Почему Pinia
- Установка Pinia
- Store профиля
- Actions
- Упражнение - Перенос в профиль
- Добавление axios
- Упражнение - Store для категорий
- Упражнение - Вывод списка
- Создание категории
12Vue Router
- Установка Vue Router
- RouterView
- children
- Упражнение - Страница входа
- useRouter
- LazyLoading
- Vue DevTools
- Active links
- Динамические пути
- Упражнение - Главная страница
- Helpers
- onBeforeRouteUpdate
- Упражнение - Получение закладок
- NotFound
- Тест - Vue Router
13Авторизация
- Типизация defineModel
- Работа с формой
- Отправка запроса на авторизацию
- JWT
- Хранения в LocalStorage
- NavigationGuard
- Данные за авторизацией
- Упражнение - Редактирование категории
- Упражнение - Удаление категории
- Упражнение - Компонент закладки
- Упражнение - Вывод списка закладок
- Типизация defineEmits
- Тест - Авторизация
14Встроенные компоненты
- Упражнение - добавление закладки
- useTemplateRef
- Component Registration
- Async Components
- Teleport
- Transition
- Сборка для production
- Тест - Встроенные компоненты
15Заключение
- Куда двигаться дальше
- Финальное тестирование
Организатор
Автор курса
Мнения учеников
Отзывы о курсе
Оставьте отзыв
Расскажите о качестве обучения, поддержке и результате. Это поможет другим выбрать организацию осознанно.
Оставьте заявку
Консультант ответит на вопросы о курсе «Vue.js 3, Vue Router и Pinia» и поможет разобраться в деталях обучения.
Нажимая кнопку, вы даете согласие на обработку персональных данных
Информация обновлена 3 сентября 2026 г.
Продолжить выбор
Похожие курсы
Начать без затрат
