Nuxt.js с нуля - 20 серий

Плейлист из всех 20 серий: https://www.youtube.com/playlist?list=PLOICX-WjKEZe85LsS1UnQScl4Qv_cQsnC

С 11 апреля по 31 мая делал серию прямых трансляции на своём ютуб канале про существенное обновление текущего сайта. Всего получилось около 37 часов видео. Но я советую смотреть хотя бы на скорости 1.5х, но видео можно смотреть и на 2х ускорении. Экономьте своё время :)

Такие видео будут полезны для тех, кто только начинает знакомство с фреймворком Nuxt.js и хочет увидеть, как на нём можно сделать не теоретический проект, а реальный сайт. Кстати, вы сейчас на нём находитесь. Приятного просмотра!

1. Что такое Nuxt.js + установка.

  • 00:00 Баг Ютуба
  • 03:43 Начало про Nuxt.js
  • 05:04 Что такое Nuxt.js
  • 05:50 Сайты, которые используют Nuxt.js
  • 13:15 Server side rendering
  • 19:35 Другие варианты работы Nuxt.js
  • 23:20 Подготовка с установке Nuxt.js
  • 25:30 Пример модели "Блог" в mongoose
  • 33:20 Что плохого в текущем сайте
  • 37:58 Fetch в версии Nuxt.js 2.12
  • 41:53 Процесс установки ПО перед Nuxt.js
  • 49:35 Установка Nuxt.js
  • 01:01:16 Открытие папки с проектом Nuxt.js в VS Code
  • 01:01:39 Структура проекта Nuxt.js
  • 01:04:49 Запуск Nuxt.js
  • 01:14:00 Финал

2. SEO + базовые настройки и плагины.

  • 00:00 Вступление
  • 04:25 Анализ сайта с помощью SEO Spider
  • 06:27 Кодировка сайта
  • 07:11 Код ответа сервера
  • 08:02 301 редирект
  • 11:01 Учитываем рекомендации поисковых систем
  • 12:14 Возможность индексации страниц
  • 18:45 Title, Description, H1
  • 23:56 Про важность SEO
  • 28:30 Адреса страниц
  • 42:30 Как добавить Title и Description на странице в Nuxt.js
  • 48:00 Подключение style.css для всего сайта в nuxt.config.js
  • 59:05 Мета-тег Canonical
  • 01:15:58 Пример дублей страниц сайта на Битриксе
  • 01:23:07 Добавление Canonical в шаблоне Nuxt.js
  • 01:30:55 Мета-теги Open Graph для соц сетей
  • 01:32:46 Схема.орг
  • 01:36:10 Установка Яндекс.Метрики в Nuxt.js
  • 01:45:00 Установка карты сайта sitemap-module
  • 02:11:40 Конец

3. Компонент Header.

  • 00:00 Начало
  • 05:17 Создание страниц и разделов
  • 12:27 Создание и подключение компонента Header
  • 18:10 HTML содержимое шапки сайта
  • 31:52 CSS оформление шапки сайта
  • 35:55 Подключение шрифтов
  • 38:25 Вёрстка меню навигации
  • 40:48 Выделение текущей ссылки nuxt-link-exact-active
  • 48:03 Вёрстка правой части шапки сайта
  • 01:05:15 Применение базовых стилей к основному блоку
  • 01:06:30 Создание шаблона для главной страницы
  • 01:08:02 Присвоение шаблонов страницам
  • 01:11:30 Итог

4. Бекенд и модели в Mongoose.

  • 00:00 Начало
  • 02:20 Prettier для VS Code
  • 02:50 Установка и настройка mongoose
  • 10:30 Структура бекенда на примере страниц с услугами
  • 16:09 Базовый маршрут для обработки GET запроса
  • 21:20 Создание модели Услуга
  • 27:57 Маршрут для создания Услуги
  • 33:00 Форма для создания Услуг с фронтенда
  • 57:20 then() после выполнение запроса
  • 01:01:27 Получение всех Услуг методом GET
  • 01:06:13 v-for для массива с данными
  • 01:13:40 Итог

5. Перенос старых моделей в новый сайт.

  • 00:00 Введение
  • 04:00 Что я делал на прошлой трансляции
  • 07:10 Перенос данных из базы MongoDB
  • 10:05 Текущие модели
  • 15:25 Загрузка старой базы в новый проект
  • 31:45 Подключение старых моделей
  • 36:43 Перенос старых маршрутов и установка ПО
  • 39:28 Вывод данных из базы на фронтенде
  • 57:00 Вёрстка блога
  • 01:08:32 Создание страницы и маршрута для одной записи
  • 01:14:23 Хлебные крошки
  • 01:20:33 Вывод html контента внутри страницы блога
  • 01:21:42 Итог

6. Вывод записей из MongoDB.

  • 00:00 Введение
  • 01:44 Динамические страницы _id.vue
  • 13:45 Вёрстка страницы блога
  • 32:23 Блок "Поделиться" от Яндекса
  • 35:35 Про фотик в качестве веб-камеры
  • 41:41 Подключение скриптов на странице
  • 46:14 Перенос скриптов из head в body
  • 51:46 Форматирование даты с nuxt-date-fns
  • 01:07:58 Выбор модуля для комментариев
  • 01:19:13 Итог

7. Тегирование и пагинация.

  • 00:00 Начало
  • 00:59 Теги записей в блоге
  • 04:38 Создание страниц под теги
  • 06:50 Фильтрация данных через тег
  • 11:06 Создание меню тегов
  • 16:28 Бекенд реализация фильтра по тегу
  • 18:37 Добавление данных в header запроса axios
  • 28:26 Возвращаемся к бекенду
  • 41:53 Вёрстка меню тегов
  • 48:20 Пагинация на бекенде
  • 56:20 Пагинация на фронтенде
  • 01:18:33 Скрытие кнопки Далее на последней странице
  • 02:10:37 Обработка неправильных запросов на пагинации
  • 02:23:18 Проблема с возвратом на первую страницу

8. Пагинация и создание боковой колонки сайта.

  • 00:00 Перешёл с веб-камеры на фотоаппарат
  • 12:00 Решение проблемы со сбросом пагинации
  • 17:20 Стили для кнопок пагинации
  • 22:13 Доделываю пагинацию для разделов с тегами
  • 01:26:26 Вывод данных для боковой колонки блога
  • 01:39:21 Вёрстка боковой колонки

9. Вёрстка главной страницы и слайдера.

  • 00:00 Начало
  • 02:00 Про fetch и asyncData
  • 14:38 Выбор записей блога на главной странице
  • 28:22 Вёрстка первого экрана главной страницы
  • 41:44 Вёрстка блока с УТП
  • 01:00:36 Выбор слайдера
  • 01:07:05 Установка vue-awesome-swiper
  • 01:10:17 Создание слайдера на главной странице
  • 01:17:55 Вёрстка слайдера

10. Вёрстка сайта.

  • 00:00 Начало с техническими проблемами
  • 02:10 Вёрстка блока с логотипами
  • 09:20 Подготовка логотипов для заливки на сайт
  • 16:00 Сравнение качества сжатия tinypng и фотошопа
  • 24:40 Добавление логотипов на сайт
  • 30:10 Установка nuxt-lazy-load
  • 39:47 Вёрстка блока про прямые трансляции
  • 48:44 Делаю зафиксированную шапку сайта
  • 01:04:07 Вёрстка футера
  • 01:26:45 Итог

11. Добавление записей в MongoDB и загрузка картинок.

  • 00:00 Начало
  • 02:30 Создание модели Услуга
  • 11:28 Маршруты в Express для услуг
  • 21:07 Создание страницы на фронтенде для одной услуги
  • 34:30 Отправка запросов через Postman
  • 39:11 Публикация услуг с фронтенда
  • 01:08:44 Загрузка файла (с ошибкой, см. след. стрим)
  • 01:33:24 Выбор визуального текстового редактора
  • 01:38:27 Внесение услуг в базу

12. Редактирование записей в базе данных.

  • 00:00 Начало БЕЗ ЭКРАНА
  • 00:40 Ошибка в прошлой трансляции про загрузку файлов БЕЗ ЭКРАНА
  • 03:17 Про компоненты БЕЗ ЭКРАНА
  • 15:23 ВКЛЮЧИЛ ЭКРАН!!!
  • 15:40 Ещё раз про компоненты
  • 16:40 Редактирование услуг с фронтенда
  • 01:15:05 Удаление услуги
  • 01:37:04 Обновление изображения, прикрепленного к услуге
  • 02:23:06 Итог

13. Async fetch, компоненты и кейсы.

  • 00:00 Начало
  • 01:00 Пример работы async fetch
  • 05:17 Вывод компонентов в услугах с vue-multiselect
  • 24:50 Раздел с кейсами
  • 27:50 Создание модели Кейс
  • 35:52 Создание маршрутов на бекенде для кейсов
  • 42:38 Создание кейсов на фронтенде
  • 52:30 Установка и настройка tinyMCE
  • 01:26:41 Итог

14. Прайс-лист, теги и вёрстка контактов.

  • 00:00 Текущее состояние сайта
  • 01:33 Показываю готовый раздел с кейсами
  • 08:52 Отправка 2 отдельных картинок через форму
  • 13:48 Отправка массива через vue-multiselect
  • 17:14 Админка для редактирования кейсов
  • 19:00 Обновления в разделе Блог
  • 24:48 Вывод таблицы с динамическим прайсом
  • 38:20 Вывод тегов в кейсах
  • 01:07:03 Вёрстка страницы Контакты
  • 02:19:15 Добавление схемы проезда из Яндекс.Карт

15. Формы и валидация.

  • 00:00 Начало
  • 01:20 Изменения на сайте
  • 02:28 Поиск по сайту
  • 08:44 Хлебные крошки + передача данных в компонент
  • 11:05 Компонент с блоком Поделиться от Яндекса
  • 13:35 Код внутренней страницы wiki
  • 16:06 Форма обратной связи
  • 22:27 Отправка данных формы на почту через Nodemailer
  • 34:36 Валидация Vee-Validate 3
  • 42:32 Примеры правил для валидации данных
  • 48:40 Вынос формы обратной связи в отдельный компонент
  • 01:05:21 Вёрстка формы обратной связи
  • 01:40:19 Делаю заголовок формы динамическим

16. Мобильная версия и PWA.

  • 00:00 Начало
  • 01:00 Подготовка к вёрстке вертикальной мобильной версии
  • 03:30 Показываю вёрстку старой версии сайта
  • 05:23 Варианты фиксации меню
  • 06:10 Продолжаю про подгтовку к вёрстке мобильной версии
  • 07:45 Вёрстка вертикальной мобильной версии
  • 11:23 Добавление гамбургера для навигации
  • 36:24 Функциональность показа и скрытия меню
  • 57:02 Вёрстка главной страницы
  • 01:12:08 Рассказываю про свои роутер и wi-fi адаптер)
  • 01:15:05 Продолжение вёрстки главной страницы
  • 01:21:47 Установка и настройка Nuxt PWA
  • 01:46:07 Сворачивание меню после клика по ссылке

17. Админка сайта.

  • 00:00 Начало
  • 01:13 Меню админки
  • 03:00 Бекенд валидация уникальности урлов
  • 05:30 Транслитерация h1 в корректный адрес страницы
  • 10:10 Валидация данных в форме админки
  • 13:45 Валидация загрузки файла (баг Vee-Validate)
  • 33:00 Компонент и store меню админки
  • 49:32 Установка и настройка уведомлений nuxt toast

18. Авторизация Nuxt-auth и JWT токен.

  • 00:00 Начало
  • 00:40 Текущие изменения на сайте
  • 03:00 Замена window.location.reload на нормальное обновление данных
  • 06:50 Подключение компонентов другим способом для code spliting
  • 08:42 Изменения в CSS файлах
  • 13:30 Установка Nuxt-auth
  • 14:40 Как генерируется sitemap.xml с динамическими урлами
  • 18:16 Настройка Nuxt-auth
  • 21:58 Форма логина
  • 39:45 Обработка запросов из формы логина
  • 01:01:30 Создание bearer токена
  • 02:07:18 Расшифровка токена и отправка user
  • 02:38:38 Что нужно сделать дальше для авторизации

19. Окончание авторизации, деплой на VDS + много полезных мелочей.

  • 00:00 Начало
  • 01:37 Для чего нужна авторизация
  • 03:36 Защита роутов на бекэнде
  • 07:24 Ограничение времени действия токена
  • 12:45 Проверка логина и пароля
  • 16:20 Дополнительные методы по защите сайта
  • 20:05 nuxt-env по умолчанию виден на фронте
  • 21:55 Показываю финальный package.json
  • 24:10 Nuxt-auth Logout
  • 28:32 Шаблон для страниц с ошибками, например 404
  • 29:50 Helmet для Express JS
  • 34:07 Загрузка изображений в TinyMCE
  • 43:00 Nuxt build analyzer
  • 45:58 Подключение плагинов и компонентов
  • 47:10 Генерация документов MS Word
  • 52:50 Данные гидрации
  • 01:06:15 Деплой (перенос сайта/программы) на VDS
  • 01:16:56 Добавление Nuxt PWA в Google Play
  • 01:19:40 Что будет дальше?

20. Финал. Полный обзор проекта.

  • 00:00 Начало
  • 03:22 Запуск проекта
  • 04:47 Nuxt.config.js
  • 05:43 Режим работы Universal
  • 06:35 Общий раздел Head
  • 09:35 Подключение валидации Vee-Validate 3
  • 10:20 Отправка формы на почту с Nodemailer
  • 12:15 Реализация 301 редиректов
  • 13:52 Работа с датами date-fns
  • 15:11 Nuxt PWA
  • 16:40 Отправка запросов через Axios
  • 18:17 Генерация sitemap.xml
  • 20:55 Nuxt http + async fetch
  • 22:17 Уведомления toast
  • 23:30 Авторизация Nuxt-auth
  • 27:07 Отложенная загрузка контента Nuxt-lazy-load
  • 28:50 Подключение Яндекс.Метрики
  • 29:21 Локальная стратегия авторизации Nuxt-auth
  • 30:31 Axios proxy для деплоя
  • 31:16 Настройки валидации Vee-Validate 3
  • 32:48 Package.json
  • 32:51 Визуальный редактор tinyMCE
  • 33:23 Загрузка изображений через tinyMCE
  • 36:53 Генерация документов через file-saver
  • 40:05 Mongoose + модели
  • 43:36 Слайдер vue-awesome-swiper
  • 47:59 Vue-multiselect
  • 51:08 Компоненты админки и хлебных крошек
  • 52:10 Разметка Schema.org для хлебных крошек, услуг и организации
  • 54:55 Компоненты: логотипы клиентов, отправка формы, слайдер, сравнение цен
  • 56:04 Выбор компонентов для вывода на страницах услуг
  • 57:17 Подключение блока "Поделиться" от Яндекса (забыл указать body:true)
  • 58:32 Поиск на сайте
  • 01:01:28 Компоненты header и footer
  • 01:02:40 Скрипт для транслита url
  • 01:03:45 Шаблоны сайта layouts
  • 01:05:58 Страницы сайта pages
  • 01:07:53 Показываю все бандлы через npx nuxt build -a
  • 01:08:43 Продолжение по страницам сайта
  • 01:15:50 Бекенд
  • 01:16:42 Папка со статичными файлами static
Автор: Александр Дергунов
Дата публикации:
Поделиться: