Nuxt - fullstack Vue фреймворк
На этом курсе мы изучим Nuxt - веб-фреймворк на основе Vue. Обучение будет крайне практическим: мы будем разрабатывать интернет-магазин, одновременно осваивая новые знания и сразу же применяя их на практике. Для проекта предусмотрены многочисленные макеты и готовое API, которое вы сможете запустить на локальном сервере.
Мы начнём с создания нового проекта, настройки layout и изучения роутинга. Далее углубимся в Universal Rendering, поймём его механизм работы, выясним, что такое гидратация и чем отличается серверный рендеринг (SSR) от клиентского (CSR).
После этого мы изучим PostCSS, управление стилями и анимацию смены страниц. Разберёмся, как работать с состоянием в SSR, и подключим Pinia. Затем мы перейдём к более сложным темам, как авторизация в Nuxt, SEO, мета-теги и OpenGraph. В конце курса рассмотрим backend-составляющую Nuxt, создадим простое API и будем сохранять данные пользователя в базу данных.
После завершения курса вы научитесь:
- Разрабатывать Nuxt-приложения с нуля
- Настраивать SSR и SSG
- Использовать файловый роутинг
- Создавать переиспользуемые композаблы
- Настраивать middleware и плагины
- Интегрировать с внешними API
- Оптимизировать SEO и производительность
- Работать с модулями экосистемы
- Развёртывать приложения в продакшен среде
Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум
-
Урок 1. 00:05:111.1. Nuxt (Введение)
-
Урок 2. 00:06:141.2. Как устроен курс
-
Урок 3. 00:01:161.3. Обзор проекта
-
Урок 4. 00:10:181.4. Работа на платформе
-
Урок 5. 00:01:341.5. Проект домашнего задания
-
Урок 6. 00:02:572.1. Настройка окружения (Настройка окружения)
-
Урок 7. 00:04:492.2. Установка Node
-
Урок 8. 00:03:002.3. Настройки VSCode
-
Урок 9. 00:04:072.4. Создание проекта
-
Урок 10. 00:17:332.5. Домашнее задание AI
-
Урок 11. 00:04:543.1. Обзор проекта (Структура проекта)
-
Урок 12. 00:05:393.2. Автоимпорт
-
Урок 13. 00:04:383.3. Вложенные компоненты
-
Урок 14. 00:06:283.4. Настройка автоимпортов
-
Урок 15. 00:04:283.5. App configuration
-
Урок 16. 00:08:323.6. Environment vars
-
Урок 17. 00:05:394.1. Добавление страниц (Роутинг)
-
Урок 18. 00:03:254.2. Программный роутинг
-
Урок 19. 00:06:094.3. NuxtLink и prefetch
-
Урок 20. 00:03:044.4. Перенаправление
-
Урок 21. 00:04:184.5. Страница ошибки
-
Урок 22. 00:06:004.6. Nuxt Font и стили
-
Урок 23. 00:10:254.7. Упражнение - Компонент кнопки
-
Урок 24. 00:07:414.8. Упражнение - Стилизация страницы ошибки
-
Урок 25. 00:05:564.9. Структура путей
-
Урок 26. 00:05:454.10. Динамические пути
-
Урок 27. 00:04:085.1. Default Layout (Layout)
-
Урок 28. 00:05:355.2. Custom Layout
-
Урок 29. 00:07:315.3. Упражнение - Input
-
Урок 30. 00:03:085.4. Добавление иконок
-
Урок 31. 00:07:105.5. NuxtIcon
-
Урок 32. 00:07:425.6. Упражнение - Вёрстка Footer
-
Урок 33. 00:12:065.7. Стилизация иконок
-
Урок 34. 00:17:475.8. Упражнение - Шапка
-
Урок 35. 00:04:405.9. Состояние ссылок
-
Урок 36. 00:11:316.1. Universal Rendering (Server Side Rendering)
-
Урок 37. 00:07:146.2. Пример рендера
-
Урок 38. 00:03:316.3. Client Side Rendering
-
Урок 39. 00:05:566.4. ClientOnly
-
Урок 40. 00:06:306.5. Жизненный цикл Nuxt
-
Урок 41. 00:12:316.6. Hybrid Rendering
-
Урок 42. 00:04:357.1. CSS модули (Стилизация и анимация)
-
Урок 43. 00:06:317.2. Postcss
-
Урок 44. 00:06:487.3. Page Transitions
-
Урок 45. 00:03:497.4. Внешние стили
-
Урок 46. 00:03:177.5. Tailwind
-
Урок 47. 00:04:268.1. Развёртка API (Получение данных)
-
Урок 48. 00:04:118.2. Запросы в Insomnia
-
Урок 49. 00:07:148.3. $fetch
-
Урок 50. 00:05:228.4. useFetch
-
Урок 51. 00:04:578.5. Ограничения useFetch
-
Урок 52. 00:03:138.6. Refresh данных
-
Урок 53. 00:05:288.7. useAsyncData
-
Урок 54. 00:08:338.8. Упражнение - Select
-
Урок 55. 00:08:168.9. Вывод категорий в каталоге
-
Урок 56. 00:13:598.10. Упражнение - Карточка товара
-
Урок 57. 00:03:558.11. v-bind стилей
-
Урок 58. 00:07:258.12. Упражнение - Данные товаров
-
Урок 59. 00:03:339.1. Повторный запрос данных (Работа с состоянием)
-
Урок 60. 00:09:039.2. Хранение состояния с SSR
-
Урок 61. 00:07:359.3. Упражнение - Поиск по каталогу
-
Урок 62. 00:04:289.4. useDebounce
-
Урок 63. 00:03:029.5. Добавление Pinia
-
Урок 64. 00:06:189.6. Store для избранного
-
Урок 65. 00:07:049.7. callOnce
-
Урок 66. 00:10:419.8. Добавление в избранное
-
Урок 67. 00:03:569.9. Persisted State
-
Урок 68. 00:06:009.10. Упражнение - Отображение избранного
-
Урок 69. 00:07:2710.1. Форма авторизации (Авторизация)
-
Урок 70. 00:07:2910.2. Получение JWT
-
Урок 71. 00:04:5110.3. Упражнение - State авторизации
-
Урок 72. 00:07:1710.4. Middleware
-
Урок 73. 00:04:1910.5. Глобальный middleware
-
Урок 74. 00:02:5510.6. Упражнение - Выход пользователя
-
Урок 75. 00:07:3911.1. Default head и favicon (SEO и Metadata)
-
Урок 76. 00:05:0211.2. useHead и useSeoMeta
-
Урок 77. 00:04:4611.3. Динамический title
-
Урок 78. 00:03:5211.4. Title template
-
Урок 79. 00:08:3411.5. Sitemap
-
Урок 80. 00:06:1011.6. Robots txt
-
Урок 81. 00:09:0511.7. Nuxt DevTools
-
Урок 82. 00:08:4612.1. Server Middleware (Server endpoints)
-
Урок 83. 00:05:5412.2. Server routes
-
Урок 84. 00:07:1112.3. Body Query Params
-
Урок 85. 00:06:0912.4. Подключение базы данных
-
Урок 86. 00:09:2212.5. Сохранение данных
-
Урок 87. 00:06:2012.6. Интеграция с frontend
-
Урок 88. 00:03:2712.7. Упражнение - Получение данных
- https://github.com/AlariCode/23-nuxt-app
- https://www.figma.com/design/RfRNmdUn38IKYFr2CzMDwr/23---Nuxt?node-id=0-1&t=RLNZellqBPowIokE-1