当前位置：首页 > VUE

vue实现天气小案例

2026-01-21 10:12:13VUE

实现天气小案例的步骤

创建Vue项目

使用Vue CLI创建一个新项目，确保安装了Vue和必要的依赖项。可以通过以下命令创建项目：

vue create weather-app
cd weather-app
npm install axios

获取天气API

选择一个天气API服务，如OpenWeatherMap或和风天气。注册账号并获取API密钥。OpenWeatherMap的API调用示例：

vue实现天气小案例

const API_KEY = 'your_api_key';
const API_URL = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=metric`;

创建天气组件

在Vue项目中创建一个Weather组件，用于显示天气信息。组件模板可以包含城市名称、温度、天气图标等信息。

<template>
  <div class="weather">
    <h2>{{ city }}</h2>
    <p>{{ temperature }}°C</p>
    <img :src="iconUrl" alt="Weather icon">
    <p>{{ description }}</p>
  </div>
</template>

获取并显示天气数据

在组件的脚本部分，使用axios调用天气API，并将返回的数据绑定到模板中。

vue实现天气小案例

<script>
import axios from 'axios';

export default {
  data() {
    return {
      city: '',
      temperature: '',
      description: '',
      iconUrl: '',
    };
  },
  methods: {
    fetchWeather(city) {
      const API_KEY = 'your_api_key';
      const API_URL = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=metric`;
      axios.get(API_URL)
        .then(response => {
          this.city = response.data.name;
          this.temperature = response.data.main.temp;
          this.description = response.data.weather[0].description;
          this.iconUrl = `https://openweathermap.org/img/w/${response.data.weather[0].icon}.png`;
        })
        .catch(error => {
          console.error('Error fetching weather data:', error);
        });
    },
  },
  mounted() {
    this.fetchWeather('Beijing');
  },
};
</script>

添加样式

为天气组件添加一些基本样式，使其看起来更美观。

<style scoped>
.weather {
  text-align: center;
  padding: 20px;
  border-radius: 10px;
  background-color: #f0f0f0;
  max-width: 300px;
  margin: 0 auto;
}
.weather img {
  width: 50px;
  height: 50px;
}
</style>