Антон Ларичев → Nuxt / PurpleSchool - fullstack Vue фреймворк

Полный курс по Nuxt и созданию веб приложений на Vue

После прохождения курса вы сможете:

• Создавать Nuxt-приложения с нуля
• Настраивать SSR и SSG
• Работать с файловым роутингом
• Разрабатывать переиспользуемые композаблы
• Настраивать middleware и плагины
• Интегрировать внешние API
• Оптимизировать SEO и производительность
• Работать с модулями экосистемы
• Развертывать приложения в продакшен

Что в курсе?
В этом курсе мы познакомимся с Nuxt — веб-фреймворком на Vue. Курс будет максимально практическим, так как мы всё будем изучать, создавая интернет-магазин и сразу применяя полученные знания на практике. Для проекта подготовлено множество макетов и готовое API, которое вы сможете запустить локально.

Мы начнём с создания нового проекта, настроим layout и разберёмся с роутингом. Далее погрузимся в Universal Rendering, посмотрим, как он работает, что такое гидратация и чем SSR отличается от CSR.

После этого изучим PostCSS, работу со стилями и анимацию смены страниц, посмотрим, как работать с состоянием в SSR и подключим Pinia. Затем перейдём к более продвинутым темам, таким как авторизация в Nuxt, SEO, мета-теги и OpenGraph. В конце курса рассмотрим backend-составляющую Nuxt, создадим простое API и сохраним данные пользователя в базу данных.

План курса:
01. Введение
1.1 Nuxt
1.2 Как устроен курс
1.3 Обзор проекта
1.4 Работа на платформе
1.5 Проект домашнего задания
1.6 AI и тренажёры
1.7 Практика на проекте
1.8 Рекомендуемый курс

02. Настройка окружения
2.1 Настройка окружения
2.2 Установка Node
2.3 Настройки VSCode
2.4 Создание проекта
2.5 Домашнее задание AI

03. Структура проекта
3.1 Обзор проекта
3.2 Автоимпорт
3.3 Вложенные компоненты
3.4 Настройка автоимпортов
3.5 App configuration
3.6 Environment vars
3.7 Тест - Структура проекта

04. Роутинг
4.1 Добавление страниц
4.2 Программный роутинг
4.3 NuxtLink и prefetch
4.4 Перенаправление
4.5 Страница ошибки
4.6 Nuxt Font и стили
4.7 Упражнение - Компонент кнопки
4.8 Упражнение - Стилизация страницы ошибки
4.9 Структура путей
4.10 Динамические пути
4.11 Тест - Роутинг

05. Layout
5.1 Default Layout
5.2 Custom Layout
5.3 Упражнение - Input
5.4 Добавление иконок
5.5 NuxtIcon
5.6 Упражнение - Вёрстка Footer
5.7 Стилизация иконок
5.8 Упражнение - Шапка
5.9 Состояние ссылок
5.10 Тест - Layout

06. Server Side Rendering
6.1 Universal Rendering
6.2 Пример рендера
6.3 Client Side Rendering
6.4 ClientOnly
6.5 Жизненный цикл Nuxt
6.6 Hybrid Rendering
6.7 Тест - Server Side Rendering

07. Стилизация и анимация
7.1 CSS модули
7.2 Postcss
7.3 Page Transitions
7.4 Внешние стили
7.5 Tailwind
7.6 Тест - Стилизация и анимация

08. Получение данных
8.1 Развёртка API
8.2 Запросы в Insomnia
8.3 $fetch
8.4 useFetch
8.5 Ограничения useFetch
8.6 Refresh данных
8.7 useAsyncData
8.8 Упражнение - Select
8.9 Вывод категорий в каталоге
8.10 Упражнение - Карточка товара
8.11 v-bind стилей
8.12 Упражнение - Данные товаров
8.13 Тест - Получение данных

09. Работа с состоянием
9.1 Повторный запрос данных
9.2 Хранение состояния с SSR
9.3 Упражнение - Поиск по каталогу
9.4 useDebounce
9.5 Добавление Pinia
9.6 Store для избранного
9.7 callOnce
9.8 Добавление в избранное
9.9 Persisted State
9.10 Упражнение - Отображение избранного
9.11 Тест - Работа с состоянием

10. Авторизация
10.1 Форма авторизации
10.2 Получение JWT
10.3 Упражнение - State авторизации
10.4 Middleware
10.5 Глобальный middleware
10.6 Упражнение - Выход пользователя
10.7 Тест - Авторизация

11. SEO и Metadata
11.1 Default head и favicon
11.2 useHead и useSeoMeta
11.3 Динамический title
11.4 Title template
11.5 Sitemap
11.6 Robots txt
11.7 Nuxt DevTools
11.8 Тест - SEO и Metadata

12. Server endpoints
12.1 Server Middleware
12.2 Server routes
12.3 Body Query Params
12.4 Подключение базы данных
12.5 Сохранение данных
12.6 Интеграция с frontend
12.7 Упражнение - Получение данных
12.8 Тест - Server endpoints

13. Заключение
13.1 Куда двигаться дальше?
13.2 Финальное тестирование

Обновлено 12 апреля 2025г.
Автор курса: Антон Ларичев
Основатель PurpleSchool
Занимаюсь разработкой уже более 14 лет и имею большой опыт: JavaScript, TypeScript, Php, Go, C#, Swift и Python. Активно внедряю гибкие методологии разработки в компании и внутренние обучения для команд.

Тариф Самостоятельный
Уроки и упражнения
Обратите внимание: Домашние задания, Ai-тренажеры, Поддержка наставника, Практика в студии - в данный тариф не входят.

ИСТОЧНИК

СКАЧАТЬ