项目实战

项目概览

输入城市名，显示当前天气：温度、湿度、风速、天气图标。

⏱️ 预计 1.5 小时 | 🛠️ Vue 3 + OpenWeather API

你将学到： API 调用、环境变量管理、异步数据处理

功能清单

城市搜索输入框
显示温度、天气描述、湿度、风速
天气图标（晴/雨/雪/多云）
加载中状态
搜索历史（最近 5 个城市）
错误处理（城市不存在、网络错误）

注册 API Key

访问 https://openweathermap.org/api 注册免费 API Key。

创建 .env 文件：

VITE_WEATHER_API_KEY=你的key

跟着做

帮我做一个天气查询应用（Vue 3）：
1. 顶部城市搜索框，输入后按回车或点搜索
2. 调用 OpenWeather API：api.openweathermap.org/data/2.5/weather?q={city}&appid={key}&lang=zh_cn
3. 显示：城市名、温度、天气描述、体感温度、湿度、风速
4. 根据天气状况显示对应图标（用 emoji：☀️⛅🌧️❄️）
5. 搜索历史：底部显示最近 5 个搜索的城市，点击快速查询
6. API Key 放在 .env 环境变量中
7. 加载时显示骨架屏，出错时显示友好提示
8. 设计参考 iOS 天气 App 的简洁风格

🎯 延伸挑战

加上 5 天天气预报
用 Geolocation API 自动获取当前位置天气
支持切换温度单位（摄氏度/华氏度）

✅ 项目成果

一个可用的天气查询工具
学会了调用第三方 API
掌握了环境变量的安全使用