
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





