一款现代化的天气预报应用，基于Vue 3和TypeScript构建，提供实时天气数据、多日预报、空气质量监测等功能。
#阿里云ESA Pages #阿里云云工开物
本项目是阿里云 ESA (Edge Security Acceleration) 边缘计算创新大赛的创意参赛作品。借助 阿里云 ESA强大的边缘计算能力，我们将这个富交互的静态网站分发到全球节点，确保用户在世界任何角落都能体验到闪电般的加载速度。
根据项目亮点三维度总结框架，本项目在以下三个方面表现突出：
- 动态天气动画：根据实时天气状况呈现相应动态背景效果，如雨雪云雾等视觉元素
- 交互式UI设计：采用现代化卡片式布局，结合平滑过渡和微交互提升用户体验
- 可视化数据展示：通过图表和图形直观展现温度变化趋势和空气质量指数
- 实用性导向：提供精准的实时天气信息和多日预报，满足用户的日常需求
- 多场景覆盖：支持位置定位、城市搜索等多种查询方式，适应不同使用场景
- 生活辅助功能：集成空气质量监测、温度单位转换等贴心功能，提升生活质量
- 现代化技术栈：采用Vue 3组合式API和TypeScript，确保代码质量和可维护性
- 高效构建工具：利用Vite实现快速开发体验和优化的生产构建
- 组件化架构：采用模块化设计理念，便于功能扩展和团队协作
本天气应用提供以下核心功能：
- 实时天气查询：显示当前位置或指定城市的实时天气状况
- 7天天气预报：提供未来七天的天气趋势预测
- 空气质量监测：展示PM2.5、PM10等空气质量指标
- 温度趋势图表：可视化展示温度变化趋势
- 动态天气动画：根据天气状况显示相应的动态背景效果
- 城市搜索功能：支持按城市名称搜索天气信息
- 温度单位切换：支持摄氏度与华氏度之间的转换
- 天气详情展示：显示湿度、风速、能见度等详细天气参数
- Node.js >= 18.0.0
- npm 或 yarn 包管理器
-
克隆项目到本地：
git clone <repository-url> cd weather-app
-
安装项目依赖：
npm install
-
启动开发服务器：
npm run dev
-
在浏览器中访问
http://localhost:5173查看应用
npm run build构建后的文件将位于 dist/ 目录中，可用于部署到生产环境。
npm run preview此命令将在本地启动一个服务器来预览构建后的生产版本。
src/
├── components/ # 可复用的UI组件
├── views/ # 页面级组件
├── assets/ # 静态资源（图片、图标等）
├── api/ # API接口封装
├── utils/ # 工具函数
├── types/ # TypeScript类型定义
├── App.vue # 根组件
├── main.ts # 应用入口文件
└── style.css # 全局样式
- App.vue：应用的根组件，负责整体布局和路由配置
- main.ts：应用的入口文件，初始化Vue实例并挂载到DOM
- vite.config.ts：Vite构建工具的配置文件
- package.json：项目依赖和脚本配置
- 数据获取：通过API接口获取天气数据
- 状态管理：使用Vue 3的响应式系统管理应用状态
- 组件通信：通过props和emit实现父子组件间的数据传递
- 生命周期：在适当的生命周期钩子中处理数据请求和清理工作
- 前端框架：Vue 3 (v3.5.24)
- 编程语言：TypeScript (v5.9.3)
- 构建工具：Vite (v7.2.4)
- 开发服务器：Vite Dev Server
- 包管理器：npm
- 编译器：vue-tsc (v3.1.4)
- 开发依赖：
- @vitejs/plugin-vue (v6.0.1)
- @vue/tsconfig (v0.8.1)
- @types/node (v24.10.1)
- 组件化架构：采用模块化的组件设计，提高代码复用性和可维护性
- 类型安全：使用TypeScript进行静态类型检查，减少运行时错误
- 响应式设计：采用CSS Flexbox和Grid布局，适配不同设备屏幕
- 性能优化：通过懒加载、虚拟滚动等技术提升应用性能
- 用户体验：注重界面美观和交互流畅性，提供良好的用户体验
- 代码规范：遵循Vue官方推荐的最佳实践和编码规范
- 易于扩展：模块化的设计使得添加新功能变得简单直观
- 跨平台兼容：支持主流浏览器，确保一致的用户体验
“本项目由阿里云ESA提供加速、计算和保护”
