Vue 3 для начинающих / Разработка интернет-магазина Vue Sneakers

Наконец-то доделал курс по Vue 3 для начинающих, в котором мы будем разрабатывать полноценный проект Vue Sneakers (старый добрый React Sneakers, но улучшенный в плане дизайна, анимации и функционала) хранить данные будем на бесплатном сервисе Mokky. 🧐 Для кого этот курс? Курс предназначен для НАЧИНАЮЩИХ 👨🏻‍🎓, кто не знаком с Vue. Для ноченающех! Не для тру фронтенд девелоперов с опытом в 150 лет и познавших вселенную фронтенда, а для простых смертных. Для тех, кто вообще не знаком с Vue и хочет понять, что это за фреймворк и как на нём создавать реальные приложения с передачей данных между компонентами, роутингом, запросами к бэкенду, а не просто тудушки. В этом курсе мы не просто будем изучать Vue, но и разрабатывать приложение с роутингом, запросами на бэк, передачей данных между приложением, анимациями, изучим что такое Composition API / Options API и т.д. ⏬ Мы поймём: - Как работает Vue - Научимся передавать данные между компонентами - Делать запросы на бэк и обрабатывать JSON-данные - Как делать переход между страницами с помощью Vue Router - Как стилизировать приложение с помощью TailwindCSS - Как сделать красивую и простую анимацию списков товаров, корзину и т.п. ⚙️ Стэк технологий: - Vue 3 - Vue Router - TailwindCSS - Axios - @formkit/auto-animate - Composition API / Options API - ESLint - Prettier 💾 Ссылка на исходник и дизайн: 🎉 Как задеплоить Vue Sneakers: 👟 Ссылка на JSON-товаров: 🔗 Ссылки на мои ресурсы: — Telegram-канал: — Поддержать донатом: — VK: — Личный блог: — GitHub: — Моё резюме: ⏰ Таймкоды: 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 Используем сервис для хранения данных 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 Подводим итоги
Back to Top