Сборка и развертывание полного курса Nuxt 3 | #Nuxtjs #vue #nuxt3

• Курс охватывает основные концепции Nuxt 3.  

• Демонстрация работы с динамическими маршрутами и корзиной покупок.  

• Использование Tailwind CSS и Restlet для дизайна.  

• Использование Nuxt 3 для отправки POST-запросов на REST.  

• Перенаправление на страницу приветствия после аутентификации.  

• Создание кнопок "выход" и "профиль" для управления доступом.  

• Обзор тем, которые будут изучены в курсе.  

• Введение в Nuxt 3 и его преимущества.  

• Установка и структура проекта.  

• Создание компонентов и использование каталога компонентов.  

• Динамическая маршрутизация и использование View Router.  

• Создание маршрутов и страниц.  

• Создание макетов и динамическая маршрутизация.  

• Использование каталога ресурсов и общедоступного каталога.  

• Управление заголовками и SEO с помощью Nuxt 3.  

• Использование composable и управление состоянием.  

• Выборка данных с помощью Nuxt 3 и использование fetch.  

• Промежуточное программное обеспечение и серверные маршруты.  

• Развертывание проекта на Netlify.  

• Введение в Nuxt 3 как систему взглядов.  

• Преимущества Nuxt 3: встроенная маршрутизация, поддержка TypeScript, PWA и AMP.  

• Гибкость в использовании Webpack и White.  

• Встроенная поддержка ES-транспилятора.  

• Использование H3 для универсального развертывания и View Router для навигации.  

• Преимущества Nuxt 3: интерфейс командной строки Uxi и серверный движок Nitro.  

• Модуль Nuxt 2 Bridge для совместимости с Nuxt 2.  

• Рекомендация использовать Nuxt 3 для создания современных и производительных приложений.  

• Переход на сайт nextjs.org для работы с Next.js.  

• Необходимость установки Visual Studio Code и плагина TypeScript.  

• Использование команды npx для установки Next.js CLI.  

• Открытие проекта в Visual Studio Code.  

• Установка npm и изучение зависимостей.  

• Установка расширения Volar и плагина TypeScript для Volar.  

• Запуск npm run dev для открытия проекта в браузере.  

• Обзор файловой структуры и конфигурации Next.js.  

• Обзор конфигурации TypeScript и package.json.  

• Описание скриптов сборки, dev, generate и блокировки пакета.  

• Настройка Next.js через файл n.config.ts.  

• Удаление тега приветствия из приложения.  

• Использование автоматического импорта в Next.js.  

• Создание нового репозитория с помощью git.  

• Игнорирование ненужных каталогов с помощью gitignore.  

• Обзор функции auto import в Next.js.  

• Создание кнопки и счетчика с использованием view composition API.  

• Настройка скрипта для управления значениями счетчика.  

• Обсуждение API для создания композиций.  

• Возможность использования дополнительного API.  

• Пример создания методов для увеличения и уменьшения значений.  

• Composition API позволяет создавать методы для увеличения и уменьшения значений.  

• Рекомендация использовать Composition API вместо дополнительного API.  

• Упоминание о десятичасовом курсе на YouTube-канале Bitcoin.  

• Каталог компонентов как место для хранения компонентов представления.  

• Компоненты как изолированные элементы, которые можно повторно использовать.  

• Пример использования компонентов для разделения пользовательского интерфейса.  

• Создание каталога компонентов и файла для компонента счетчика.  

• Пример использования компонента счетчика в приложении.  

• Создание и использование компонента приветствия.  

• Проблемы с именованием компонентов и их решение.  

• Рекомендация использовать Pascal Case для имен компонентов.  

• Пример использования Pascal Case и Kebab Case для именования компонентов.  

• Введение в динамические компоненты.  

• Пример использования динамических компонентов для счетчика.  

• Преимущества динамических компонентов для повторного использования и гибкости.  

• Динамический компонент позволяет использовать компонент без прямого импорта.  

• Используется тег компонента и функция resolveComponent.  

• Различие между динамическим компонентом и динамическим импортом.  

• Ленивая загрузка компонента позволяет динамически импортировать компонент.  

• Используется ключевое слово lazy перед именем компонента.  

• Пример использования ленивой загрузки для нижнего колонтитула.  

• Пример использования счетчика как динамического компонента.  

• Использование тега script для настройки компонента.  

• Пример изменения значения компонента при нажатии на кнопку.  

• Использование неглубокой ссылки вместо ref для повышения производительности.  

• Пример изменения компонента при нажатии на кнопку.  

• Возможность использования неглубокой ссылки для изменения значения компонента.  

• Пример использования условного рендеринга для отображения компонента.  

• Использование v-if для отображения компонента на основе условия.  

• Пример переключения между компонентами при нажатии на кнопку.  

• Использование lazy для динамического импорта компонентов.  

• Компоненты импортируются только при необходимости.  

• Пример использования lazy для уменьшения размера файла.  

• Файловая маршрутизация в Next.js.  

• Создание каталога pages для маршрутизации.  

• Пример создания каталога pages и его влияние на размер файла.  

• Создаем страницу с индексом и шаблоном "привет, мир".  

• Перезапускаем сервер для отображения изменений.  

• Важно понимать, что страницы в каталоге pages отображаются в приложении.  

• Компонент Next Page используется для отображения текущей страницы.  

• Перезапуск сервера необходим для отображения изменений.  

• Пример: изменение текста "привет, мир" на "привет, индекс".  

• Создаем страницу About с шаблоном "привет, about".  

• Перезапуск сервера для отображения изменений.  

• Маршрутизация работает независимо от наличия приложения dot view.  

• Используем компонент Next Link или программную навигацию.  

• Важно иметь один корневой элемент для плавного перехода между страницами.  

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

• Введение в каталог макетов для повторного использования компонентов.  

• Создание каталога layouts и файла default.js.  

• Использование слота для отображения содержимого макетов на всех страницах.  

• Макеты загружаются перед отображением страниц.  

• Пример: отображение "привет из макета" на всех страницах.  

• Использование слота для размещения содержимого страниц в макете.  

• Перезапуск сервера для проверки изменений.  

• Создание макета по умолчанию без использования имен.  

• Пример страницы профиля с использованием тега "Привет".  

• Создание файла "боковая панель" с HTML-статьей.  

• Определение стиля для боковой панели.  

• Использование боковой панели в профиле пользователя.  

• Использование метода "определить метаданные страницы" в Nux 3.  

• Настройка макета для страницы профиля.  

• Пример использования пользовательского макета.  

• Отключение макетов для страницы "О программе".  

• Пример страницы "О программе" без макета.  

• Настройка div для содержания элементов.  

• Объяснение динамической маршрутизации в Nux 3.  

• Пример создания страницы "iphone" с различными моделями.  

• Использование объекта "dollar route" для динамического изменения маршрута.  

• Создание вычисляемого свойства для замены дефиса на пробел.  

• Использование функции "use route" для работы с маршрутом в теге скрипта.  

• Пример замены дефиса на пробел в маршруте.  

• Каталог ресурсов используется для добавления всех ресурсов веб-сайта, обрабатываемых инструментами сборки.  

• Содержит файлы CSS, шрифты и изображения, которые не могут быть использованы в общедоступном каталоге.  

• Объяснение, что такое общедоступный каталог и почему некоторые изображения из него не могут быть использованы.  

• Установка Tailwind CSS для настройки каталога ресурсов.  

• Использование Nuxt 3 и необходимость установки дополнительных модулей.  

• Создание конфигурации для Tailwind CSS и добавление её в проект.  

• Создание каталога ресурсов и каталога css внутри него.  

• Добавление файла tailwind.css в каталог css.  

• Импорт файла tailwind.css в макет для использования в Nuxt 3.  

• Добавление конфигурации PostCSS в Nuxt 3.  

• Использование опции postcss и предоставление плагина.  

• Перезапуск сервера для применения изменений.  

• Применение Tailwind CSS к навигационной панели.  

• Определение классов для Tailwind CSS в содержании.  

• Перезапуск сервера для проверки работы Tailwind CSS.  

• Добавление Tailwind CSS в боковую панель.  

• Определение местоположения файла tailwind.css в массиве.  

• Перезапуск сервера для применения изменений в боковой панели.  

• Демонстрация работы Tailwind CSS в различных частях приложения.  

• Объяснение, как использовать каталог ресурсов и добавлять Tailwind CSS в приложение Nuxt 3.  

• Общедоступный каталог обслуживается непосредственно в корневом каталоге сервера.  

• Содержит общедоступные файлы, которые должны сохранять свои имена.  

• В отличие от каталога ресурсов, файлы в общедоступном каталоге не изменяются при сборке.  

• Каталог страниц должен начинаться с маленькой буквы "p".  

• Перезапуск сервера необходим для отображения всех iPhone.  

• Проблема была в том, что каталог страниц начинался с заглавной буквы "P".  

• Настройка макета по умолчанию для навигационной панели.  

• Добавление тени и отступов для кнопок.  

• Проверка отображения всех iPhone и исправление ошибок.  

• Размещение изображений в общедоступном каталоге для точного соответствия имени домена.  

• Пример с изображением iPhone 12.  

• Использование общедоступного каталога для SEO-файлов, таких как robots.txt.  

• Использование head для управления мета-тегами и заголовками.  

• Настройка заголовков в зависимости от страницы.  

• Пример изменения заголовка для страницы iPhone.  

• Настройка сетки и карточек для отображения изображений и названий iPhone.  

• Добавление теней и отступов для улучшения визуального восприятия.  

• Добавление тени и выравнивание изображений.  

• Добавление маржи и границ для элементов.  

• Кликабельность элементов для перехода на соответствующие страницы.  

• Использование динамических заголовков для страниц.  

• Проблемы с устаревшими заголовками и их решение.  

• Настройка заголовков для разных страниц сайта.  

• Установка заголовков для всех страниц сайта.  

• Использование мета-тегов для добавления информации о странице.  

• Определение мета-тегов через шаблон и вычисляемые свойства.  

• Добавление мета-тегов для SEO.  

• Определение мета-тегов страницы для различных целей.  

• Использование массивов объектов для мета-тегов.  

• Составные элементы позволяют повторно использовать логику для выполнения задач.  

• В Next.js есть каталог composables для хранения таких элементов.  

• Пример использования: создание тележки для управления состоянием товаров.  

• Создание каталога composables и файла state.js.  

• Использование хука useState для создания состояния.  

• Пример: создание пустого массива для хранения товаров в корзине.  

• Компоненты автоматически импортируются в шаблон.  

• Создание карточки на навигационной панели.  

• Использование метода настройки для привязки состояния к компоненту.  

• При нажатии на кнопку "Купить сейчас" товар добавляется в корзину.  

• Использование функции для добавления товара в корзину.  

• Проверка наличия товара в корзине перед добавлением.  

• Проверка наличия товара в корзине перед удалением.  

• Создание вычисляемого свойства для проверки наличия товара.  

• Удаление товара из корзины, если он уже есть.  

• Создание функции для удаления товара из корзины.  

• Фильтрация массива для удаления ненужного товара.  

• Проверка работы системы и удаление товара из корзины.  

• Nux предоставляет функции use fetch, use lazy fetch, use async data и use lazy async data для обработки выборки данных.  

• Пример использования: создание страницы входа в систему и добавление кнопки входа.  

• Страница входа в систему с формой для ввода электронной почты и пароля.  

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

• Предотвращение отправки формы по умолчанию.  

• Создание функции on submit для отправки запроса post.  

• Объяснение использования функции fetch для отправки запроса post.  

• Пример отправки запроса get и получение данных.  

• Отправка запроса post с указанием метода post.  

• Получение кода статуса 400 и исправление ошибок.  

• Создание интерактивной формы с полями для электронной почты и пароля.  

• Отправка формы вместо ввода данных вручную.  

• Использование функции await для обработки асинхронных запросов.  

• Запись ответа в журнал и получение данных и ошибки.  

• Создание состояния загрузки для отображения прогресса.  

• Использование тега span для отображения состояния загрузки.  

• Создание состояния для аутентификации пользователя.  

• Обработка ошибок и изменение состояния при успешном входе.  

• Получение ошибки при неудачном входе.  

• Создание реактивных данных для хранения ошибки и изменение состояния.  

• Использование ошибки подчеркивания для отображения ошибок.  

• Перенаправление пользователя на домашнюю страницу при успешном входе.  

• Отображение ошибки подчеркивания с красным фоном и текстом.  

• Сохранение логина после успешного входа.  

• Создание состояния аутентификации и использование useAuthState.  

• Отображение кнопки профиля при успешном входе и кнопки входа при неудачном.  

• Добавление кнопки выхода из системы.  

• Изменение состояния аутентификации при нажатии на кнопку выхода.  

• Отображение профиля и кнопки выхода при успешном входе.  

• Важность промежуточного программного обеспечения в N3.  

• Три вида промежуточного программного обеспечения: анонимное, именованное и глобальное.  

• Использование промежуточного программного обеспечения для ограничения доступа к страницам.  

• Использование анонимного промежуточного программного обеспечения для ограничения доступа к странице профиля.  

• Определение промежуточного программного обеспечения на странице профиля.  

• Проверка работы промежуточного программного обеспечения через консольные журналы.  

• При попытке зайти на страницу профиля без аутентификации возникает ошибка.  

• Решение: использовать промежуточное ПО для проверки аутентификации.  

• Если аутентификация успешна, страница загружается без проблем.  

• Создание каталога middleware и файла auth.js для извлечения логики аутентификации.  

• Использование именованного промежуточного ПО для предотвращения дублирования кода.  

• Применение логики аутентификации в промежуточном ПО.  

• Добавление ключевого слова global для глобального промежуточного ПО.  

• Пример использования: подсчет количества посещений страниц.  

• Создание состояния для хранения количества посещений и отображение его на странице.  

• Создание каталога server и файла api.js для серверных маршрутов.  

• Определение обработчика событий для API.  

• Пример вызова API и получения данных для отображения в приложении.  

• Ошибка при попытке доступа к данным через API.  

• Проблема с ключами в объекте данных.  

• Решение: исправление ключей для корректного доступа к данным.  

• Данные для iPhone поступают из API.  

• Использование префикса "api" для маршрутов.  

• Промежуточное ПО для ограничения доступа пользователей.  

• Использование массива iPhone на стороне клиента.  

• Подготовка проекта к развертыванию на Netlify.  

• Два типа развертывания: Node.js и статический хостинг.  

• Запуск сборки с помощью npm.  

• Создание статического файла с помощью npm run generate.  

• Запуск сервера и проверка работы приложения.  

• Вход в Netlify и добавление нового сайта.  

• Авторизация GitHub и выбор репозитория.  

• Запуск npm run generate и развертывание приложения.  

• Проверка работы маршрутов и функций приложения.  

• Создание собственного домена для приложения.  

• Завершение развертывания и проверка работы приложения на реальном домене.  

• Призыв к подписке на YouTube-канал и Twitter.  

• Обещание новых видео и проектов.