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

🔗 Ссылки на мои ресурсы:

⏰ Таймкоды:
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 Подводим итоги

[ArchakovBlog]

Благодарю всех за фидбек и тех поддержал в Boosty! Курс опубликован, ссылки на все ресурсы указаны в описании 👇


P.S.: Где-то с 6 часов в видео микрофон начал тупить и, к сожалению, я не проверил этот момент, за что прошу заранее извинить и понять 🥲

Если вы обратите внимание на календарь, то одна часть идёт в 22 октября, другая продолжается 3 ноября. За это время успел заболеть, забыть о курсе на неделю, перенастраивал микрофон для рабочих созвонов, в последствии слышны дэбильные шумы как из мемов с усиленным звуком.

[tugmbrm]

Как же я благодарен таким людям! Вы даже не представляете, как вы помогаете. Записать 7-ми часовой ролик в бесплатном формате на ютубе, с качественным объяснением, это уму не постижимо, спасибо большое!

[小熙-ny]

This is a very good introductory course for Vue. No matter how many people have done similar Vue tutorials before, this is the best I have seen because it is designed from the Figma page, installing VSCode and recommending plugin installation, using third-party TailwindCSS. Although the order in the video is a bit messy, it should first introduce the project's final completion effect and functional demonstration, and then introduce how to design this project from Figma, Finally, starting with the sequence of introducing Vue and writing code, I personally feel that it feels better. Although English is not my native language, to be honest, I cannot understand English. I also translated the video and comments into Chinese to watch. I hope to continue improving this project in the future, such as adding login, registration, logout, password retrieval, personal information page, and related modification functions. Turn it into a complete tutorial, I think no one can surpass it! This comment was translated from Chinese to English👍👍👍👍

[databox]

Храни тебя бог, добрый ты человек. Не встречал более логичного и лаконичного объяснения по Vue. Низкий поклон и огромная благодарность за твои труды.

[ivanhurbatov]

Здравствуйте. Очень хотелось бы посмотреть Реакт Пицца или Сникерс но на новеньком Next JS 14. Именно от Вас это был бы лучший контект на русском ютубе. Не знаю почему, но хоть 50 часов, но это 50 часов чистого кайфа и наслаждения от получения информации в Вашем темпе и объёме) Спасибо большое за контент, ведь невероятно трудно делать видео таких объёмов и не выгорать, Вы просто великолепны. Никогда не сдавайтесь!)

[goodbutbad]

Как же хочется полный курс по новому Next именно от тебя 😸

[rv]

46:51 Говоря, что нет разницы между option и composition, чуть ошибаетесь:
1) Более гибкая организация кода;
2) Улучшенный вывод типов;
3) Меньший производственный комплекс и меньшие накладные расходы


4:26:10 Дочерний компонент должен отдавать наверх данные через emit(). Почему?
1) Семантика. Вы явно указываете что у компонента есть данные для отдачи их на верхний уровень, в то время как прокидывание функции делает поведение компонента неявным.

2) Изолированность. Компонент имеет данные на вход и выход и сам описывает что принимает и отдает. Передача функции в него "завязывает руки" и компонент теряет контроль над тем, что происходит в нём.

[FeetUnder]

Вешать обработчик @click на <img>, <li> и другие не подразумевающие нажатие элементы -- дурная практика, не повторяйте за автором.
От этого страдает доступность вашего сайта, например незрячему посетителю браузер не сообщит, что такая кнопка есть на сайте (потому-что для браузера это элемент списка), пользователь не пользующийся мышкой не сможет при помощи клавиатуры добраться до неё и так далее. В спецификации html есть тег <a> для перехода на другую страницу и <button> для действия внутри страницы, а уже их можно стилизовать как хочется -- хоть под картинку, хоть под элемент горизонтального списка.

[АлексейМихеев-йж]

Рахмет бро! Помимо того что очень все понятно, понравилось как ты реагировал на ошибки и косяки. А потом спокойно переделывал, не удаляя эту часть в видео. Это тоже важный навык. Удачи и свершений!

[bellatrisa_mraks]

Твой мокки офигенный, я психанула на mockApi и перенесла всё туда, всё отлично работает😻
Спасибо за проект и за твои старания. Обучение получается куда более охотным💥

[alexbruh]

Арчаков, спасибо тебе огромное за такой огромный вклад в разработку. Всем сердцем желаю тебе счастья и здоровья! Ты лучший! <3

[molinety]

Спасибо за видео-курс длинной почти в 8 часов, посмотрел я его полностью за два дня, вместе с тобой писал, решал ошибки, контент топ, понравилось что ты рассуждаешь как решать ошибки и всегда слышно что "у меня есть решение проблемы", это мега круто, ведь такими и должны быть разработчики, не только профессиональные, но и начинающие. Продолжай в том же духе, спасибо за такой труд.

[dianov]

Просто огнище! Молю сделай курс по Nuxt

[JeyX]

Мне оч понравилось, как автор показывает что можно сделать то или иное, с помощью разных вариантов

[Anatoli-bqpe]

Огромное тебе нечеловеческое спасибо за твой труд! Классная подача материала!

[patupin]

Как же это хорошо, ещё и tailwind познал. Спасибо огромное!

[Mrflomaster]

Ты самый крутой чувак в Ютубе 👍 Признателен тебе за твой канал и то что ты привносишь в массы ❤

[qrintv]

Здравствуйте, Archakov blog.

Я сейчас смотрю ваши курсы по vue и react и я очень благодарен вам. Вы единственный в ru ютубе, который использует актуальные версии vue и react, спасибо вам большое, что вы есть ❤
У меня есть к вам просьба, мне очень интересно стало про стейт мендж и рутеры во vue - veuex и pinia, vue router. Я конечно прошу очень много, но не могли бы мы записать курсы на эти темы, пожалуйста. Конечно я мог бы сам изучить эти темы сам, но у меня не хватает мозгов для документации😅. Я только начал изучать и мне даётся очень сложно все это. А другие каналы вообще использую не актуальные версии или вообще их нет.
Спасибо вам за ваши труды❤

[alexur]

Огромное спасибо добрый человек, все бы так объясняли, как ты!

[Paranoid_mp]

Как всегда великолепно! Начал смотреть и залип. Походу придется опять начать пытаться стать погромистом. Период отдыха и осознания длился слишком долго. Очень рад, что у тебя все хорошо и что ты продолжаешь радовать годнотой.