Наконец-то доделал курс по Vue 3 для начинающих, в котором мы будем разрабатывать полноценный проект Vue Sneakers (старый добрый React Sneakers, но улучшенный в плане дизайна, анимации и функционала) + хранить данные будем на бесплатном сервисе Mokky.
⏰ Таймкоды:
00:00:00 Введение
00:11:27 Подготавливаем окружение среды разработки
00:15:40 Создание и разбор стартового проекта
00:25:00 Пробуем написать свой код на Vue
00:37:50 Что такое Options API на примере счётчика
00:41:50 Переделываем на Composition API
00:53:50 Как прокинуть данные в компонент
01:05:05 Начинаем разработку проекта / Установка TailwindCSS
01:11:45 Изучаем дизайн приложения
01:17:20 Вёрстка шапки (Header)
01:43:00 Вёрстка карточки товара и списка (Card + CardList)
02:14:40 Вёрстка корзины (Drawer)
02:47:43 Разработка поиска + фильтрация товаров (вёрстка + функционал)
02:56:30 Используем сервис MOKKY.DEV для хранения данных
03:50:00 Разработка закладок
04:08:30 Как прокидывать данные между компонентами без пропсов (provide / inject)
04:51:00 Разработка функционала корзины (открытие, добавление товаров, создание заказа)
06:11:35 Прикручиваем анимацию в приложении (auto-animate)
06:19:10 Подключаем Vue Router
06:45:23 Делаем отдельную страницу закладок
07:12:30 Доделываем корзин / Статус: "Заказ офомлен"
07:26:30 Подводим итоги
⏬ Мы поймём:
- Как работает Vue
- Научимся передавать данные между компонентами
- Делать запросы на бэк и обрабатывать JSON-данные
- Как делать переход между страницами с помощью Vue Router
- Как стилизировать приложение с помощью TailwindCSS
- Как сделать красивую и простую анимацию списков товаров, корзину и т.п.
⚙️ Стэк технологий:
- Vue 3
- Vue Router
- TailwindCSS
- Axios
- @formkit/auto-animate
- Composition API / Options API
- ESLint
- Prettier
💾 Ссылка на исходник и дизайн: https://t.me/archakovblog/586
🎉 Как задеплоить Vue Sneakers: https://youtu.be/dnfdrvuHFks
👟 Ссылка на JSON-товаров: https://604781a0efa572c1.mokky.dev/items
🔗 Ссылки на мои ресурсы:
— Telegram-канал: https://t.me/archakov_im
— Поддержать донатом: https://boosty.to/archakov_blog
— VK: https://vk.com/archakov_im
— Личный блог: https://archakov.im
— GitHub: https://github.com/Archakov06
— Моё резюме: https://career.habr.com/archakovim
Подписаться: https://www.youtube.com/@ArchakovBlog/featured
