Пишем метео-приложение на Vue 3 с нуля! Часть 1. Фронтенд-разработка для начинающих
HTML-код
- Опубликовано: 26 июл 2024
- Учимся работать с Vue 3 - создаем пустое приложение, переносим туда готовую верстку и получаем данные о погоде из открытого API. Далее в следующих частях расставим данные в верстку.
00:00 Вступление
00:17 Смотрим макет
01:45 Кому будет полезен этот вебинар
02:16 Создаем пустое приложение на Vue 3
05:07 Чистим проект, переносим верстку
14:50 Разбиваем проект на компоненты
21:24 Регистрируемся на Open Weather Map и получаем ключ API
23:02 Получаем данные о погоде с сервера
34:49 Заключение
Забрать готовую верстку можно на моем гитхабе - github.com/Nakonsta/Forecast-...
Официальный сайт Vue - vuejs.org/
Сайт API - openweathermap.org/current 
Наука
Отличная подача материала. Спасибо вам большое!
Спасибо за видео! Всегда интересно посмотреть, как работает профессионал!
Супер, спасибо за видео! Долго искала что-то подобное)
Спасибо за труды))) около 1года работаю на нативном JS, вот пришла пора познакомиться с Vue и буду это делать на твоём канале))
Анастасия, спасибо! Все очень доходчиво. Продолжайте)
Это моё первое знакомство со vue, довольно непривычно, но в целом понятно. Спасибо за видео, интересный проект! Было бы круто увидеть ещё уроков по vue для самых маленьких))
Офигенно! Очень понятные обьянения. Спасибо!!!
Хорошее видео. Продолжайте в том же духе. Всё доходчиво объясняете.
Отлично! Удачи в развитии!
Пушка! Спасибо большое! Желаю вам ещё больше туториалов и просмотров
Молодец, подпишусь и поддержу 👍 Буду ждать ещё уроков по vue, pinia и т.д.
Спасибо, скоро будем еще один проект писать, тоже vue 3 + router + pinia
Спасибо, интересно)
блин, вы супер крутая, спасибо за материал
Спасибо за материал, очень интересно и познавательно!
Было бы классно увидеть материал по вебсокетам на примере приложения реалтайм
Потому что на просторах ютуба крайне мало полезной информации по этой теме
Заранее спасибо!
Спасибо за информацию)
молодец!!!
Хорошие уроки. Сделай пожалуйста небольшой курс по созданию админ панели на vue js для REST API с роутами и регистрацией.
It's very nice project and design! I love this app) Thanks for your work)
Привет, было бы круто, если бы Вы сделали видео "О себе" , как попали в разработку и т.п. :)
Много усердно изучала, ясно же
спасибо за видео, красавица
Очень крутая девушка. Все понятно и просто
15:56 - нет такого ограничения. У меня в приложении шаблоны идут сначала. Это вопрос личных предпочтений
17:34 - этим должен заниматься prettier/eslint
18:31 - есть рекомендация называть компоненты в два слова, чтобы случайно не войти в конфликт с тегами HTML
Есть ощущение, что import в стилях компонент использован зря. Кажется, что этот импорт нужно использовать тогда, когда требуется взять из импортируемого файла некую sass-переменную.
Мне кажется, что ключи к api лучше хранить в .env. У vite есть особенность по настройке.
Хотелось бы урок по vue 3 такого плана: авторизация пользователей, разные шаблоны в зависимости от роли пользователя, различные CRUD операции над пользователями и какими то сущностями, ответ приходит с бекэнда - fastapi
В документации к api есть &q=auto:ip. зачем использовать город с наименованием? и сделать ее async created, а методом получить fetch по кнопке или e.key === "Enter". И почему не через .then(async (response) => {const data = await response.json();
Здравствуйте. Подскажите пожалуйста, у вас есть макет этого приложения в фигме? Я бы хотел сверстать самостоятельно это приложение
❤
Зачем каждый раз делать импорт стилей, когда можно один раз в main.js Это сделать ?
я не понял как можно импортировать файл без разрешении на экспорта. То-есть в файлах компонента нету строки export
а что за сериал Мгла? упустил )
А что лучше для новичков изучать Vue или React? Какой более предпочтительней в работе, интересней, сложней?
Если в двух словах - то выбирайте React, если уверены в своей сильной мотивации к изучению, а Vue - если не уверены. На React побольше вакансий (хотя недавно было исследование на хабре на 180 крупных компаний на российских рынке, оказалось, что 33% используют Vue), а Vue попроще в изучении. Также если в окружении есть люди, которые пишут на одном из них, то это тоже значимый фактор в сторону выбора конкретного фреймворка
какая красивая улыбка. Вы Гамлет по соционике похоже
Начал повторять за ней , но у меня выскакивают ошибки а она не показывает какие ошибки возникают у нее и как их лечить. Наример после импорта стилей в App.vue не видит переменных. В целом оценка 3- из пяти
Привет. Спасибо за урок. Не совсем понимаю зачем два раза импортировать "assets/styles/main". В App.vue понятно, а зачем в main.js? Буду признателен если кто объяснит
Добрый вечер, если попробовать закомментировать этот импорт, то сразу будет видно, что часть стилей слетит - например, нормализация для html и body. Так как компонент App.vue эти теги не затрагивает, то они и не будут стилизованы. Также в компоненте может вообще отсутствовать блок style с импортом
@@CosyFrontendNastia Спасибо. Понятно объясняешь. Желаю что бы канал рос)
а в index.html как появился div id=app?
Автоматически создается там при создании проекта
Почему, если первый компонент уже подключён, то вы продолжаете работу в родительском компоненте?
В этом приложении основная сетка у нас в родительском компоненте, а те блоки, которые залиты градиентом в дизайне - это отдельные дочерние компоненты.
Также родительский компонент отвечает за получение данных с сервера, соответственно, часть работы в любом случае и должна быть в родительском компоненте в этом приложении
Если бы оно было более сложное, на несколько страниц, то в родительском я бы оставила, например, только RouterView и получение данных, которые потребуются нескольким страницам, через хранилище
А нельзя все это делать без хуков?
Да, getWeather можно вызвать и без onMounted, даже я бы сказала логичнее тут без onMounted обойтись. Изначально планировала сделать немного иначе, оттуда onMounted появился
@@CosyFrontendNastia и использовать стандартные data как в vue2 тоже можно?
@@sergeysergeev9271 не можно, а нужно
Сергей, отдельный видос про Composition и Option API запишу, а также про setup js и работу с ним/без него
она только нажала ctrl+c ctrl+v
+
Девушка красивая, умная, но ролик надо переозвучить, голос дрожит, речь не внятная
Всегда есть к чему стремиться, но определяющий фактор - это материал, который спикер преподносит
А материал полезный и интересный
Лучше сказать спасибо за видео и время, уделённое на его создание, чем критиковать за голос
Мне понравилось, спасибо.
я сам реактер на вью никогда не писал но выдало мне в реки решил глянуть как же убого код на вью выглядит в сравнении с реактом
так же и про реакт можно сказать =)
Есть объективные обоснования этому с конкретными примерами ситуации, чем же вью более убогий, чем реакт
А то похоже на типичный холивар о спорах какой фреймворк круче, оперируя только субъективщиной
Скорее на реакте выглядит убого
мамкин фронтедер) лет 20 вам наверное)
@@user-mo1gm8hv7l риакт кручи
Спасибо, подписалась) Однако у меня вопрос - вот изначально установила проект не через latest, а через
1) npm i -g @vue/cli
2) vue create *название проекта* и выбрала ручную установку vue 3
Не знаю, повлияла ли такая установка на то, что без обращения к стандартному data(){return...} и methods у меня не получилось обратиться к серверу. onMounted тоже не использовала, т.к. выходило много ошибок. Обязательно ли было использовать ref, чтобы отправить запрос на сервер? Или можно обойтись без него.
Добрый день, у вас все немного смешалось. Ref мы используем для того, чтобы переменная была реактивной, с отправкой на сервер напрямую это не связано. Если вы используете data() {return ...}, то, скорее всего, вы перешли на Option Api вместо Composition Api, в этом случае ref не потребуется
По onMounted - надо смотреть, что за ошибки