Vue.js 3, Vue Router и Pinia

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

Ознакомьтесь с программой курса «Vue.js 3, Vue Router и Pinia» от PurpleSchool - purpleschool.ru

1. Введение. Vue и Pinia, Как устроен курс, Обзор проектов, Проекты домашних заданий, Обзор курсов, Работа на платформе, AI и тренажёры, Практика на проекте.
2. Настройка окружения. Настройка окружения, Настройки VSCode, Установка Node, О работе NVM, Создание проекта, Домашнее задание AI.
3. Основы. Обзор проекта, Структура компонент, Настройка eslint, Шаблоны, Bind атрибутов, JS в шаблонах, Composition API, Тест - Основы, Тренажёр - Основы, Занятие - Основы, Домашнее задание - Основы.
4. Компоненты. Макет проекта, Упражнение - Глобальный стиль, Что такое компоненты, Первый компонент, Стилизация, Slot, Несколько slot, Декомпозиция на компоненты, Упражнение - Сборка app, Тест - Компоненты, Тренажёр - Компоненты, Занятие - Компоненты, Домашнее…
5. Свойства и события. Компонент статистики, defineProps, withDefaults, v-bind, Использование svg, Упражнение - Ввод города, Events, defineEmits, Валидация emits, Наследование атрибутов, Тест - Свойства и события, Тренажёр - Свойства и события, Занятие - Свойств…
6. Реактивность. Как работает реактивность, Proxy, ref, reactive, Unwrap, nextTick, Упражнение - Состояние редактирования, computed, Тест - Реактивность, Тренажёр - Реактивность, Занятие - Реактивность, Домашнее задание - Реактивность.
7. Шаблоны и модели. v-if, v-else, v-show, Упражнение - Input, v-for, Упражнение - Список данных, Наивная реализация input, v-model, defineModel, Тест - Шаблоны и модели, Тренажёр - Шаблоны и модели, Занятие - Шаблоны и модели, Домашнее задание - Шаблоны и модели.
8. Жизненный цикл. Lifecycle Hooks, Примеры Hooks, watch, API погоды, Получение данных, keyup, Упражнение - Привязка данных, Упражнение - Обработка ошибок, Динамические стили, Упражнение - Карточка погоды, Упражнение - Вывод прогноза, Тест - Жизненный цикл, Трен…
9. Custom directive и Provide Inject. Динамические классы, Свои директивы, Упражнение - Левая панель, Рефакторинг компонент, Provide Inject, Реализация с Provide Inject, Symbol key, Упражнение - Передача данных, Упражнение - Финал приложения, Тест - Custom direc…
10. Переход на TypeScript. Почему TypeScript, Рекомендуемый курс, Создание приложения, Обзор проекта, Запуск API, Работа с API, Подготовка стилей, Типизация defineProps, Типизация ответа API, Тест - Переход на TypeScript, Занятие - Переход на TypeScript, Домашне…
11. Pinia. Почему Pinia, Установка Pinia, Store профиля, Actions, Упражнение - Перенос в профиль, Добавление axios, Упражнение - Store для категорий, Упражнение - Вывод списка, Создание категории, Тест - Pinia, Занятие - Pinia, Домашнее задание - Pinia.
12. Vue Router. Установка Vue Router, RouterView, children, Упражнение - Страница входа, useRouter, LazyLoading, Vue DevTools, Active links, Динамические пути, Упражнение - Главная страница, Helpers, onBeforeRouteUpdate, Упражнение - Получение закладок, NotFound,…
13. Авторизация. Типизация defineModel, Работа с формой, Отправка запроса на авторизацию, JWT, Хранения в LocalStorage, NavigationGuard, Данные за авторизацией, Упражнение - Редактирование категории, Упражнение - Удаление категории, Упражнение - Компонент закла…
14. Встроенные компоненты. Упражнение - добавление закладки, useTemplateRef, Component Registration, Async Components, Teleport, Transition, Сборка для production, Тест - Встроенные компоненты, Занятие - Встроенные компоненты, Домашнее задание - Встроенные компон…
15. Заключение. Куда двигаться дальше, Финальное тестирование, Собеседование с AI наставником, Практика собеседования с AI.

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

• Научитесь настраивать и организовывать: настройка окружения. настройка окружения, настройки vscode, установка node, о работе nvm, создание проекта, домашнее задание ai.
• Научитесь создавать и применять: добавление закладки, usetemplateref, component registration, async components, teleport, transition, сборка для production, тест.
• Освоите и сможете применять: глобальный стиль, что такое компоненты, первый компонент, стилизация, slot, несколько slot, декомпозиция на компоненты, упражнение.
• Освоите и сможете применять: левая панель, рефакторинг компонент, provide inject, реализация с provide inject, symbol key, упражнение.
• Освоите основы: введение. vue и pinia, как устроен курс, обзор проектов, проекты домашних заданий, обзор курсов, работа на платформе, ai и тренажёры, практика на проекте.