Пишем метео-приложение для портфолио на Vue 3 с нуля! Часть 3. Фронтенд-разработка для начинающих
Добро пожаловать в третью часть серии уроков по созданию метео-приложения на Vue 3! В этой части мы сосредоточимся на фронтенд-разработке для начинающих.
Шаг 1: Настройка рабочего окружения
Прежде чем мы начнем писать фронтенд-код, нам нужно настроить наше рабочее окружение. Мы будем использовать Vue CLI для создания нового проекта. Вы можете установить Vue CLI с помощью следующей команды:
npm install -g @vue/cli
Шаг 2: Создание компонентов
Как только Vue CLI установлен, мы можем создать новый проект с помощью команды:
vue create my-weather-app
Эта команда создаст новый проект Vue с уже настроенной конфигурацией. Теперь мы можем начать создавать компоненты для нашего метео-приложения.
Шаг 3: Работа с API
Для получения данных о погоде мы будем использовать открытое API. Мы можем отправить GET-запрос к API, чтобы получить информацию о погоде в определенном городе. Мы можем использовать Axios для отправки HTTP-запросов. Установите Axios с помощью команды:
npm install axios
Шаг 4: Отображение данных
Когда мы получим данные от API, мы можем отобразить их на странице. Мы можем использовать Vue-компоненты для отображения информации о погоде, такие как температура, влажность и скорость ветра.
Заключение
В этой части урока мы рассмотрели основы фронтенд-разработки на Vue 3. Мы настроили рабочее окружение, создали компоненты, работали с API и отобразили данные на странице. В следующей части мы продолжим работу над нашим метео-приложением и добавим функциональность, такую как поиск по городам и отображение прогноза на несколько дней.
спасибо за прекрасные уроки🤗
Я делаю тоже приложение о погоде и вот столкнулся с проблемой верного отображения времени рассвета и заката по локальному времени в зависимости от города… Пытался очень долго и с чат гпт и как тольк не пытался, и вот вижу что вы тоже делаете это)
пока еще не пробовал, но надеюсь поможет) спасибо
UPD: посмотрел ваше решение…. блин, это гениально и в то же время просто…)
Использовать город в котором время будет 0, и дальше прибалвять и оно будет меняться либо +14000, либо -14000 и отображать корректно. Спасибо!
А вы мидл?
Спасибо!)
Вы и ваш канал находка)
подскажите, зачем использовали computed? если я верно понимаю он как слушатель, срабатывает когда что-то меняется, за чем следим.
А у нас просто данные приходят и могли без него писать как и все остальное писали или не так, объясните пожалуйста.
кажется что телеграмм-канал был бы хорошим дополнением, чтобы можно было спросить или поделиться результатом ))
плохая практика передавать весь объект и использовать только один вложенный объект из переданного. из за этого приходится вставлять везде чейн оператор, хотя этого можно было бы избежать просто подключив типизацию и передавать только нужную информацию.