vue实现天气
Vue 实现天气应用
获取天气数据 API
使用第三方天气 API 如 OpenWeatherMap、和风天气或高德天气 API。注册账号后获取 API Key，用于请求天气数据。OpenWeatherMap 提供免费层级的调用，适合小型项目。
创建 Vue 项目
通过 Vue CLI 或 Vite 初始化项目：
npm create vue@latest weather-app安装 axios 用于发送 HTTP 请求：
npm install axios组件结构设计
- 主组件（Weather.vue）：处理数据获取和状态管理。
- 子组件（WeatherCard.vue）：展示天气信息（温度、湿度、风速等）。
- 搜索组件（SearchBar.vue）：允许用户输入城市名称查询天气。
实现数据获取
在 Weather.vue 中调用 API：
import axios from 'axios';
export default {
data() {
return {
weatherData: null,
city: 'Beijing',
apiKey: 'YOUR_API_KEY',
};
},
methods: {
async fetchWeather() {
try {
const response = await axios.get(
`https://api.openweathermap.org/data/2.5/weather?q=${this.city}&appid=${this.apiKey}&units=metric`
);
this.weatherData = response.data;
} catch (error) {
console.error('Error fetching weather data:', error);
}
},
},
mounted() {
this.fetchWeather();
},
};展示天气信息
在 WeatherCard.vue 中绑定数据：
<template>
<div v-if="weather">
<h3>{{ weather.name }}</h3>
<p>Temperature: {{ weather.main.temp }}°C</p>
<p>Humidity: {{ weather.main.humidity }}%</p>
<p>Wind: {{ weather.wind.speed }} m/s</p>
</div>
</template>
<script>
export default {
props: ['weather'],
};
</script>用户交互
在 SearchBar.vue 中实现搜索功能：
<template>
<input v-model="searchQuery" @keyup.enter="search" placeholder="Enter city name" />
</template>
<script>
export default {
data() {
return {
searchQuery: '',
};
},
methods: {
search() {
this.$emit('search', this.searchQuery);
},
},
};
</script>样式优化
使用 CSS 或 UI 库（如 Element Plus、Vuetify）美化界面。例如添加卡片阴影和响应式布局：
.weather-card {
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
padding: 16px;
margin: 10px;
background: white;
}部署与测试
- 测试不同城市的天气查询功能。
- 使用
npm run build生成静态文件，部署到 Netlify 或 Vercel。
通过以上步骤，可以快速实现一个基础的 Vue 天气应用。根据需求扩展更多功能，如天气预报图表、地理位置自动检测等。
