当前位置：首页 > VUE

vue实现天气预报

2026-02-23 03:58:48VUE

Vue 实现天气预报功能

获取天气 API

注册并申请免费的天气 API 服务，如和风天气、OpenWeatherMap 或心知天气。获取 API Key 用于数据请求。

创建 Vue 项目

使用 Vue CLI 创建新项目：

vue实现天气预报

vue create weather-app

安装 Axios

在项目中安装 Axios 用于发送 HTTP 请求：

npm install axios

创建天气组件

在 src/components 目录下创建 Weather.vue 文件：

vue实现天气预报

<template>
  <div class="weather-container">
    <h3>{{ city }}天气预报</h3>
    <div v-if="weatherData">
      <p>当前温度: {{ weatherData.temp }}°C</p>
      <p>天气状况: {{ weatherData.condition }}</p>
      <p>湿度: {{ weatherData.humidity }}%</p>
    </div>
    <div v-else>
      加载中...
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      city: '北京',
      weatherData: null,
      apiKey: 'YOUR_API_KEY',
      apiUrl: 'https://api.openweathermap.org/data/2.5/weather'
    };
  },
  mounted() {
    this.fetchWeatherData();
  },
  methods: {
    async fetchWeatherData() {
      try {
        const response = await axios.get(`${this.apiUrl}?q=${this.city}&appid=${this.apiKey}&units=metric`);
        this.weatherData = {
          temp: Math.round(response.data.main.temp),
          condition: response.data.weather[0].description,
          humidity: response.data.main.humidity
        };
      } catch (error) {
        console.error('获取天气数据失败:', error);
      }
    }
  }
};
</script>

<style>
.weather-container {
  padding: 20px;
  border-radius: 8px;
  background-color: #f5f5f5;
  max-width: 300px;
  margin: 0 auto;
}
</style>

在主应用中使用组件

修改 src/App.vue 文件：

<template>
  <div id="app">
    <Weather />
  </div>
</template>

<script>
import Weather from './components/Weather.vue'

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