Пишем приложение на Vue 3 с Vue Router и Pinia с нуля! Часть 1. Фронтенд-разработка для начинающих

Учимся работать с Vue 3, Vue Router и Pinia — создаем пустое приложение для подбора коктейлей, делаем маршрутизацию через роутер, подключаем хранилище Pinia. Пишем фронтенд и делаем верстку с помощью фреймворка Element Plus. Подключаем CocktailDB API, получаем с сервера данные и расставляем в верстку.

Содержание
00:00:00 Вступление
00:00:22 Смотрим макет
00:01:03 Создаем пустой проект на Vue 3
00:03:38 Чистим проект от лишнего и настраиваем под себя
00:07:58 Настраиваем Vue Router
00:14:45 Пишем общие стили для всех страниц
00:19:06 Пишем компонент-шаблон
00:30:58 Верстаем главную страницу
00:35:21 Настраиваем Pinia
00:41:44 Получаем список ингредиентов с сервера
00:43:37 Стилизация селекта через Element Plus
00:48:55 Верстаем главную страницу
00:51:47 Получаем коктейль по ингредиенту
00:55:41 Выводим список коктейлей на главной
00:57:54 Пишем компонент-превью коктейля
01:09:01 Заключение

[njsaab]

ух и жара 🔥 попыхтеть пришлось 🚒 ))) потрясающая вечеринка спасибо большое, надеюсь дальше по нарастающей темп будет таким же)))

[grTzX]

Хотелось бы в дальнейшем увидеть уроки с более сложным проектом. С использованием vuex/pinia с авторизацией по ролям, например, админ/юзер. Может быть какую-нибудь самописную админку, без сложного дизайна, с использованием UI библиотеки.

[АлександрБойко-уы]

Огромнейшее спасибо овтору! Честная подписка и лайк.

[ЕгорЕгорович-дт]

Спасибо, учусь по твоим видео, давай еще . Годный контент !

[difficultdo]

Отличный туториал у вас получился. 👍 практически полезный для начала. 🤘

[F_means_Fork]

Спасибо большое за полезный туториал <3

[HaywasterChannel]

Здравствуйте, Анастасия)
Раз вы упомянули о процессе коммерческой разработки, в разделе с obtion API для Pinia, то почему не был использован .env файл, чтобы познакомить зрителя с этим подходом? Вроде не так уж и долго, а опыт тоже полезный)

[АлександрЧасовников-щч]

Благодарю! Это видео для меня очень полезно.

[efremov-denis]

Благодарю, очень полезный и понятный урок👍

[ural-site]

Спасибо за отличный контент! Видел рекомендации, что обращение к апи не следует размещать напрямую в сторе, как по Вашему мнению с учетом реальных проектов, запросы к апи в сторе это норма?

[sergejj]

v-model передает значение элементу html?

[AlexSizovRun]

Благодарю, обязательно пройду) Typescript планируете использовать?

[elixzez]

Отличное видео )
13:10
А можно по подробнее пожалуйста, почему в этом моменте прописываем path именно :rid а не просто :id

[artem-web-developer]

Можно было бы поподробнее остановиться на некоторых моментах). А как делать валидацию с pinia не подскажете, что-то ничего толком не нашел, делать функцию в компоненте и там к примеру блокировать/разблокировать кнопку если поля заполнены

[ural-site]

Очень хорошая подача, единственное некоторые вещи желательно пояснять, хотя бы пару слов как это работает, я про вью. Еще вопрос, если в апп.вью стили сделать без скоуп и там импортировать майн.scss, то в остальных компонентах не надо будет его импортировать, правильно я понимаю?

[РахимДовидов]

да, мне бы тоже хотелось побольше проектной логики, а то почему то процентов 60 в видео заняла верстка)) Но все равно спасибо за твои уроки) ты супер)

[alexeysedov]

Посоветуйте пожалуйста книги или хорошие курсы по vue. а то очень мало материала нашел.

[weyzem]

а зачем кучу импортов по стилям делать, если достаточно просто импортировать всё дефолтное в App>style?

[vladyslavkravchenko]

когда есть возможность не позиционировать элементы то этого лучше не делать. для кнопки достаточно было дописать display: "flex" margin-left: "auto"

[Elena.S.]

Как на домашней странице в представлении со списком коктейлей должна поменяться картинка слева? На оранжевый вариант🙄