Пишем метео-приложение на Vue 3 с нуля! Часть 4. Фронтенд-разработка для начинающих
Добро пожаловать на четвертую часть руководства по созданию метео-приложения на Vue 3! В этой части мы сосредоточимся на фронтенд-разработке для начинающих. Мы будем использовать Vue 3 для создания интерфейса нашего приложения, чтобы пользователи могли легко получать информацию о погоде.
Для начала, убедитесь, что у вас установлена среда разработки Node.js и Vue CLI. Если нет, вы можете установить их, следуя инструкциям на официальных веб-сайтах.
Как только у вас все настроено, создайте новый проект Vue с помощью команды:
vue create weather-app
После этого перейдите в каталог вашего проекта и установите Axios, чтобы делать запросы к API погоды:
npm install axios
Теперь вы можете начать разработку интерфейса вашего приложения. Создайте новый компонент Vue для отображения информации о погоде и используйте его в основном компоненте вашего приложения. Вы также можете добавить стили, чтобы сделать ваше приложение более привлекательным.
Кроме того, не забудьте добавить обработку ошибок и загрузку состояний, чтобы ваше приложение могло корректно обрабатывать различные сценарии использования.
После завершения фронтенд-разработки, вы можете протестировать свое приложение, запустив его локально и проверив, как оно работает в браузере. Убедитесь, что все функции работают правильно, прежде чем переходить к следующему этапу разработки.
На этом этапе вы должны иметь рабочее метео-приложение на Vue 3! Поздравляем вас с завершением фронтенд-разработки для начинающих. При следующем шаге мы будем рассматривать, как добавить возможность использования геолокации для получения автоматической информации о погоде. Следите за обновлениями и удачи в разработке!
Спасибо. Автор красотка👍
Спасибо!
не совсем понятно, почему верстка полностью ломается если введет неверный инпут?
спасибо за видео 🙂
Компонент WeatherSummary.vue. Не знаю почему, но в inline стиле background-image не формируется путь к изображению. В vite.config.js base: '' прописал. Решил через computed:
// script
const weatherImg = computed(() => {
return new URL(`/src/assets/img/weather-main/${props.weatherInfo?.weather[0]?.description}.png`, import.meta.url).href
})
// template
<div
:style="`background-image: url('${ weatherImg }')`"
class="pic-main"
></div>
vue ругается на то что я не использую "props" и "defineProps" так как задаю переменную, на каждом компоненте по 2 ошибка, скажите, это из-за сборки проекта? Как это решить?
Было бы неплохо еще неплохо еще посмотреть на настройку storybook 7 в контексте nuxt3. Кажется в сети такого нет. Есть только пару хинди-боев