Пишем приложение на Vue 3 с Vue Router и Pinia с нуля! Часть 1. Фронтенд-разработка для начинающих
Вставка
- Опубліковано 3 лип 2024
- Учимся работать с 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 Заключение
Официальный сайт Vue - vuejs.org/
Сайт Pinia - pinia.vuejs.org/
Сайт CocktailDB API - www.thecocktaildb.com/api.php
Сайт Element Plus - element-plus.org/en-US/
Макет в Figma - www.figma.com/file/OtLxFZwe0O... - Наука та технологія
Хотелось бы в дальнейшем увидеть уроки с более сложным проектом. С использованием vuex/pinia с авторизацией по ролям, например, админ/юзер. Может быть какую-нибудь самописную админку, без сложного дизайна, с использованием UI библиотеки.
Огромнейшее спасибо овтору! Честная подписка и лайк.
Отличный туториал у вас получился. 👍 практически полезный для начала. 🤘
Благодарю, очень полезный и понятный урок👍
Спасибо, учусь по твоим видео, давай еще . Годный контент !
Благодарю! Это видео для меня очень полезно.
Большое спасибо за урок =)
Pinia это каеф 🤤
кайф слушать 😊
миллион алых роз автору
круто!
девочка-кодерша😍
да, мне бы тоже хотелось побольше проектной логики, а то почему то процентов 60 в видео заняла верстка)) Но все равно спасибо за твои уроки) ты супер)
спасиб
Здравствуйте, Анастасия)
Раз вы упомянули о процессе коммерческой разработки, в разделе с obtion API для Pinia, то почему не был использован .env файл, чтобы познакомить зрителя с этим подходом? Вроде не так уж и долго, а опыт тоже полезный)
Очень хорошая подача, единственное некоторые вещи желательно пояснять, хотя бы пару слов как это работает, я про вью. Еще вопрос, если в апп.вью стили сделать без скоуп и там импортировать майн.scss, то в остальных компонентах не надо будет его импортировать, правильно я понимаю?
Спасибо за отличный контент! Видел рекомендации, что обращение к апи не следует размещать напрямую в сторе, как по Вашему мнению с учетом реальных проектов, запросы к апи в сторе это норма?
Отличное видео )
13:10
А можно по подробнее пожалуйста , почему в этом моменте прописываем path именно :rid а не просто :id
На 13-10 можно использовать и просто id, непринципиально
У меня rid - relative id - по старой привычке использую его, но для этого проекта разницы нет совершенно
Можно было бы поподробнее остановиться на некоторых моментах). А как делать валидацию с pinia не подскажете, что-то ничего толком не нашел, делать функцию в компоненте и там к примеру блокировать/разблокировать кнопку если поля заполнены
Благодарю, обязательно пройду) Typescript планируете использовать?
TS планирую, но не на этом проекте, а один из следующих буду на нем писать + возможно, по нему будут видосы с теорией
v-model передает значение элементу html?
когда есть возможность не позиционировать элементы то этого лучше не делать. для кнопки достаточно было дописать display: "flex" margin-left: "auto"
Отличные видео! Только начал смотреть.
Хотел бы уточнить, почему views для роутера хранятся в папке pages, а не views? Вроде принято для vue в папке views хранить? А в Nuxt уже в папке pages?
И всё-таки как правильно?)
В 80% случаев в коммерческой разработке видела в папке pages, поэтому и сама ее использую) по умолчанию создается папка views
Можно и так, и так)
Посоветуйте пожалуйста книги или хорошие курсы по vue. а то очень мало материала нашел.
По курсам - берите почти любые синхронные курсы с наставником от известных компаний. Главное, чтобы был наставник, 3-я версия Vue (не 2-я) и синхронный режим работы, то есть вместе с группой начинаете, а не сами по себе. В остальном смотрите по ценнику, по дате начала, когда вам удобно
Книги не очень советую, если только как дополнительный источник обучения - они устареть успевают за время подготовки и выхода в печать + с книгой человек остается наедине с собой, без помощи преподавателя или ментора
А вообще самый эффективный источник обучения - это коммерческая разработка в команде, как только появится возможность устроиться в компанию, то обучение пойдет в разы быстрее
Курс отличный, спасибо за уроки!!!... Но, слишком интенсивный, без разъяснений в идеях философии работы и предназначения модулей, пакетов и механик. Подобные уроки точно не для новичков, а для тех, кто уже понял специфику работы фреймворков и прочих технологий.
Сейчас это уровень 15 летних стажеров, тут самые основы,такой рынок увы, хотя буквально год назад считалось что знать composition api для junior'ов сложно.
@@YellowPanamka То, что требования к разработчикам растут каждый день - это факт. Никто не спорит. Но что делать совсем новичкам, не видя разницу composition API и Options API? Или зачем вообще нужен state menegment? Что такое REST API и как он работает? В целом нужно указывать перед началом видео, что необходимо знать, уметь и понимать перед прохождением данного видео.... И колесиком мыши крутишь бесконечный сколл требований к stack`у технологий)))
а зачем кучу импортов по стилям делать, если достаточно просто импортировать всё дефолтное в App>style?
Как на домашней странице в представлении со списком коктейлей должна поменяться картинка слева? На оранжевый вариант🙄
Насколько я помню, я решила это не делать в видео, но в макете осталось. Это просто сделать - подменяйте url картинки, если в ingredient.value есть значение
И в imgUrl будет передаваться не статичная строка, а вычисляемая переменная computed, принимающая значение url нужной картинки.
@@CosyFrontendNastia спасибо!
ну вс , подписчики поперли)) когда новые видео ?
Настя давай Nuxt 3 уже
В планах и Nuxt 3, и TS
Но и более простые видео для совсем новичков тоже будут, про такие тоже спрашивают
давай магазин или соц сеть
У меня почему-то возникает ошибка, когда пытаюсь добавить элементы из формы (input, select и т.д. )
А Element Plus не забыли подключить в main.js?
@@CosyFrontendNastia Вроде бы все подключил. Кнопки, например, работают. А как только select подключаю, то все падает 😢. Можете json conf скинуть?
@@EuegenTv Скиньте репозиторий и название ветки, где ошибка, я посмотрю в ближайшие дни
@@CosyFrontendNastia вроде как решил проблему обновив vue с 3.3.2 до 3.3.4 :D
название по-моему не очень соответствует содержанию.
"Пишем приложение на Vue 3 с Vue Router и Pinia с нуля!... для тех у кого есть yarn" :)
Я к тому, что есть хороший такой процент dev envs, где система не ведает о yarn ни сном ни духом. А Вы на него опираетесь ну прям с самого начала как на что-то само собой разумеющееся.
2:28 Как к примеру на винде, линуксе без ярна установить sass, axios, другие пакеты, которые Вы так лихо yarn add'ете?
Я бы сделал небольшое лирическое отступление, объясняющее как установить ярн или обойтись без него.
если вы дошли до изучения vue, думаю должны быть в курсе о других пакетных менеджерах. аналогиченые ярну команды гуглятся по первой ссылке в гугле.
в чем проблема уставить yarn ? ) у меня на винде стоит и yarn и npm
почему она не на кухне?
вась у нее рабов хватает, на кухне тоже есть один.
А почему вы не на кухне?
@@melenium а зачем, я уже поел
Вопрос, у меня в запросе подставляется в BASE_URL localhost:5173/ и дальше сам url, из за этого я конечно получаю 404 ответ, я не понимаю почему подставляется в запрос пересмотрел все трижды, удалил сделал ещё раз, кто сталкивался? Подскажете
Вопрос решён спасибо
@@MrGreen-xs4ns можешь и другим помочь решить, такая же ошибка :)
@@vladimirorlov3532 есть решение роблемы?