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

Добро пожаловать во вторую часть серии статей о разработке метео-приложения на Vue 3! В предыдущей части мы настроили среду разработки, создали проект с помощью Vue CLI и подготовили его к началу работы. Теперь пришло время начать разрабатывать фронтенд нашего приложения.

Шаг 1: Создание компонентов

Первым шагом для разработки фронтенда нашего метео-приложения будет создание компонентов. В Vue компонент – это независимая и переиспользуемая часть пользовательского интерфейса.

Создание компонента для отображения погоды

Создадим компонент WeatherCard.vue, который будет отображать информацию о погоде. Для этого создадим новый файл с именем WeatherCard.vue и добавим следующий код:

        <template>
            <div class="weather-card">
                <h2>{{ city }}</h2>
                <p>Температура: {{ temperature }}°C</p>
                <p>Влажность: {{ humidity }}%</p>
                <p>Скорость ветра: {{ windSpeed }} м/c</p>
            </div>
        </template>

        <script>
            export default {
                props: {
                    city: String,
                    temperature: Number,
                    humidity: Number,
                    windSpeed: Number
                }
            }
        </script>

        <style scoped>
            .weather-card {
                background-color: #f5f5f5;
                padding: 20px;
                border-radius: 10px;
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            }
        </style>
    

Добавление компонента в приложение

Чтобы использовать компонент WeatherCard.vue в нашем приложении, нужно добавить его в файл App.vue. Просто добавьте следующий код в файл App.vue:

        <template>
            <div id="app">
                <weather-card
                    city="Москва"
                    :temperature="22"
                    :humidity="60"
                    :windSpeed="3"/>
            </div>
        </template>

        <script>
            import WeatherCard from './components/WeatherCard.vue';

            export default {
                name: 'App',
                components: {
                    WeatherCard
                }
            }
        </script>

        <style>
            #app {
                font-family: Avenir, Helvetica, Arial, sans-serif;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
                text-align: center;
                color: #2c3e50;
                margin-top: 60px;
            }
        </style>
    

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

Шаг 2: Получение данных о погоде

Для получения данных о погоде мы будем использовать открытое API OpenWeatherMap. Мы сможем получить данные о температуре, влажности, скорости ветра и других погодных параметрах для заданного города.

Для этого нам нужно будет создать новый файл WeatherService.js, который будет содержать логику получения данных с API. Мы также добавим методы для обработки полученных данных и передачи их в компонент WeatherCard.vue.

Это только начало разработки фронтенда нашего метео-приложения на Vue 3. В следующей части мы будем продолжать работу над приложением, добавляя новые компоненты, работая с данными и улучшая пользовательский интерфейс. Следите за обновлениями!