С 11 апреля по 31 мая делал серию прямых трансляции на Ютубе про существенное обновление текущего сайта. Всего получилось около 37 часов видео. Но я советую смотреть хотя бы на скорости 1.5х, но видео можно смотреть и на 2х ускорении. Экономьте своё время :)
И я не супер-программист, поэтому для опытных разработчиков тут будет мало интересного. Это не уроки, а создание проекта в прямом эфире - не всё сразу получается. Далеко не факт, что я выбираю самые идеальные варианты в процессе разработки.
Эти видео будут полезны тем, кто только начинает знакомство с фреймворком Nuxt.js и хочет увидеть, как на нём можно сделать не теоретический проект, а реальный сайт. Приятного просмотра!
Плейлист из всех 20 серий: https://www.youtube.com/playlist?list=PLOICX-WjKEZe85LsS1UnQScl4Qv_cQsnC
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