Пишем приложение на Vue 3 с Vue Router и Pinia с нуля! Часть 2. Фронтенд-разработка для начинающих
Добро пожаловать к части 2 нашего урока по созданию приложения на Vue 3!
В этой части мы сосредоточимся на фронтенд-разработке и научимся использовать Vue Router и Pinia, чтобы создать интерактивное и удобное пользовательское интерфейс.
Vue Router
Vue Router – это официальный маршрутизатор для приложений Vue.js. Он позволяет нам определять маршруты и связывать их с компонентами, что делает навигацию по нашему приложению более удобной.
Pinia
Pinia – это новая библиотека управления состоянием для Vue 3. Она предоставляет простой и интуитивно понятный способ управления состоянием приложения без использования глобального хранилища.
Начинаем разработку
Давайте начнем с установки необходимых пакетов. Для этого откройте терминал и выполните следующие команды:
npm install vue-router pinia
После установки пакетов, создайте новый файл для вашего роутера и состояния приложения (например, router.js и store.js).
В файле router.js вы можете определить ваши маршруты и связать их с компонентами, а в файле store.js вы можете определить состояние вашего приложения и его логику.
Далее, вы можете использовать Vue Router и Pinia в ваших компонентах, следуя их документации и примерам использования.
После завершения разработки, вы можете запустить ваше приложение и убедиться, что все работает как задумано.
Заключение
В этой статье мы рассмотрели основы фронтенд-разработки на Vue 3 с использованием Vue Router и Pinia. Теперь вы можете создавать интерактивные и мощные приложения с удобной навигацией и управлением состоянием.
Надеемся, что эта статья была полезной для вас. Следите за обновлениями, чтобы узнать больше о разработке на Vue 3!
Очень качественный контент! Побольше бы проектов по VUE. Однозначно лайк и подписка!!!
Привет, Анастасия. ± 8:20 , почему ты решила достать из URL ид коктеля используя route.path? Ведь можно достать использую параметры (route.param.rid…) А вдруг есть какая то причина ? 🙂
Ради такой девочки я готов прыгнуть с react на vue вахха)
можно пожалуйста на github загрузить, в каком то месте запутался
Большое спасибо, Анастасия! Приятно делать такое приложение )))
Анастасия, постарайтесь, пожалуйста не кодить внизу страницы. Эта зона часто попадает на зону управления видео. Учитывая, что нужно часто ставить на паузу – код получается опасити ))).
Ждем продолжения 🙂
Пробегал мимо, остановился и заслушался 🙂 как по мне, вы нормально всё объясняете, кому надо больше – читают мануалы 😉 коммент в поддержку ☝️
на днях искала информацию для практики вью, наткнулась на ваш канал.уже сделала приложение для погоды и вышедшие уроки по приложению для коктейлей. объясняете клёво: не разжёвываете каждое понятие, но и кбез комментариев код не оставляете:)
сейчас занимаюсь доработкой первого приложения (меняю стили + думаю бутстрап подключить) и если какой-то свой функционал допишу, то возможно буду использовать в портфолио.
спасибо большое за уроки!
подписался, чтобы поддержать начинающего криэтора)