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

Подписаться 1,7 тыс.

Просмотров 12 тыс.

50% 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 Заключение
Официальный сайт 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...

Наука

Опубликовано:

4 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 54

@gr21TzX9 Год назад

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

@user-gd4lt7ox2m 3 месяца назад

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

@2difficult2do Год назад

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

@efremov-denis 10 месяцев назад

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

@user-pb1zu5wz9r 2 месяца назад

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

@user-fh1gr5li2r 10 месяцев назад

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

@johnloye4465 Год назад

Большое спасибо за урок =)

@gamingplay5415 3 месяца назад

кайф слушать 😊

@lionstar3189 Год назад

Pinia это каеф 🤤

@ginhop1057 Год назад

миллион алых роз автору

@HaywasterChannel 9 месяцев назад

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

@user-bc6ig7vg3w 11 месяцев назад

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

@ural-site Месяц назад

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

@your_freedom 10 месяцев назад

круто!

@unicoxr5tj417 5 месяцев назад

девочка-кодерша😍

@ural-site Месяц назад

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

@AlexSizovRun Год назад

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

@CosyFrontendNastia Год назад

TS планирую, но не на этом проекте, а один из следующих буду на нем писать + возможно, по нему будут видосы с теорией

@user-gw2dw5qs5w 7 месяцев назад

спасиб

@gr21TzX9 Год назад

Отличные видео! Только начал смотреть. Хотел бы уточнить, почему views для роутера хранятся в папке pages, а не views? Вроде принято для vue в папке views хранить? А в Nuxt уже в папке pages? И всё-таки как правильно?)

@CosyFrontendNastia Год назад

В 80% случаев в коммерческой разработке видела в папке pages, поэтому и сама ее использую) по умолчанию создается папка views Можно и так, и так)

@artem-web-developer 8 месяцев назад

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

@sergejj3476 4 месяца назад

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

@elixzez Год назад

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

@CosyFrontendNastia Год назад

На 13-10 можно использовать и просто id, непринципиально У меня rid - relative id - по старой привычке использую его, но для этого проекта разницы нет совершенно

@alexeysedov278 Год назад

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

@CosyFrontendNastia Год назад

По курсам - берите почти любые синхронные курсы с наставником от известных компаний. Главное, чтобы был наставник, 3-я версия Vue (не 2-я) и синхронный режим работы, то есть вместе с группой начинаете, а не сами по себе. В остальном смотрите по ценнику, по дате начала, когда вам удобно Книги не очень советую, если только как дополнительный источник обучения - они устареть успевают за время подготовки и выхода в печать + с книгой человек остается наедине с собой, без помощи преподавателя или ментора А вообще самый эффективный источник обучения - это коммерческая разработка в команде, как только появится возможность устроиться в компанию, то обучение пойдет в разы быстрее

@Elena.S. 11 месяцев назад

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

@CosyFrontendNastia 11 месяцев назад

Насколько я помню, я решила это не делать в видео, но в макете осталось. Это просто сделать - подменяйте url картинки, если в ingredient.value есть значение И в imgUrl будет передаваться не статичная строка, а вычисляемая переменная computed, принимающая значение url нужной картинки.

@Elena.S. 11 месяцев назад

@@CosyFrontendNastia спасибо!

@vladyslavkravchenko5955 4 месяца назад

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

@user-ft7hb8nl2v Год назад

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

@YellowPanamka Год назад

Сейчас это уровень 15 летних стажеров, тут самые основы,такой рынок увы, хотя буквально год назад считалось что знать composition api для junior'ов сложно.

@user-ft7hb8nl2v Год назад

@@YellowPanamka То, что требования к разработчикам растут каждый день - это факт. Никто не спорит. Но что делать совсем новичкам, не видя разницу composition API и Options API? Или зачем вообще нужен state menegment? Что такое REST API и как он работает? В целом нужно указывать перед началом видео, что необходимо знать, уметь и понимать перед прохождением данного видео.... И колесиком мыши крутишь бесконечный сколл требований к stack`у технологий)))

@EuegenTv Год назад

У меня почему-то возникает ошибка, когда пытаюсь добавить элементы из формы (input, select и т.д. )

@CosyFrontendNastia Год назад

А Element Plus не забыли подключить в main.js?

@EuegenTv Год назад

@@CosyFrontendNastia Вроде бы все подключил. Кнопки, например, работают. А как только select подключаю, то все падает 😢. Можете json conf скинуть?

@CosyFrontendNastia Год назад

@@EuegenTv Скиньте репозиторий и название ветки, где ошибка, я посмотрю в ближайшие дни

@EuegenTv Год назад

@@CosyFrontendNastia вроде как решил проблему обновив vue с 3.3.2 до 3.3.4 :D

@your_freedom 8 месяцев назад

ну вс , подписчики поперли)) когда новые видео ?

@artemunix5223 Месяц назад

давай магазин или соц сеть

@YellowPanamka Год назад

Настя давай Nuxt 3 уже

@CosyFrontendNastia Год назад

В планах и Nuxt 3, и TS Но и более простые видео для совсем новичков тоже будут, про такие тоже спрашивают

@MrCter Год назад

название по-моему не очень соответствует содержанию. "Пишем приложение на Vue 3 с Vue Router и Pinia с нуля!... для тех у кого есть yarn" :) Я к тому, что есть хороший такой процент dev envs, где система не ведает о yarn ни сном ни духом. А Вы на него опираетесь ну прям с самого начала как на что-то само собой разумеющееся. 2:28 Как к примеру на винде, линуксе без ярна установить sass, axios, другие пакеты, которые Вы так лихо yarn add'ете? Я бы сделал небольшое лирическое отступление, объясняющее как установить ярн или обойтись без него.

@user-kn3yy9ll5s 8 месяцев назад

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

@megafalos850 6 месяцев назад

в чем проблема уставить yarn ? ) у меня на винде стоит и yarn и npm

@foo44444 Год назад

почему она не на кухне?

@user-pb1zu5wz9r 2 месяца назад

вась у нее рабов хватает, на кухне тоже есть один.

@melenium 8 дней назад

А почему вы не на кухне?

@foo44444 7 дней назад

@@melenium а зачем, я уже поел

@MrGreen-xs4ns 9 месяцев назад

Вопрос, у меня в запросе подставляется в BASE_URL localhost:5173/ и дальше сам url, из за этого я конечно получаю 404 ответ, я не понимаю почему подставляется в запрос пересмотрел все трижды, удалил сделал ещё раз, кто сталкивался? Подскажете

@MrGreen-xs4ns 9 месяцев назад

Вопрос решён спасибо