# vue前端项目 全国空气质量浏览网站

**Repository Path**: MaiWheat/vue-front-end-homework

## Basic Information

- **Project Name**: vue前端项目 全国空气质量浏览网站
- **Description**: 这是一个在线浏览空气质量的vue网页项目，采用vue vitek框架吗，使用vue-router 作为路由，使用element-plus组件库，使用axios作为API连接数据获取组件，API使用聚合数据的免费（一天30次访问）的数据API。
- **Primary Language**: HTML
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2025-01-07
- **Last Updated**: 2025-06-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, HTML, JavaScript, Axios, Element-UI

## README

# 全国城市空气质量浏览网站
**[English](README.en.md), [中文](README.md).**

## 一、项目概述

​	本项目是一个全国城市空气质量浏览网站，为用户提供便捷的空气质量信息查询服务，可查看全国各城市的实时、24 小时及 14 天空气质量数据，并能进一步了解站点空气质量详情。



## 二、项目特点

- **数据可视化**：通过清晰的页面布局和图表（如表格形式展示数据），直观呈现空气质量信息，方便用户快速获取关键数据。
- **响应式设计**：基于 Vue 框架，能够自适应不同设备屏幕尺寸，确保在桌面端和移动端都有良好的浏览体验。
- **交互友好**：配备完善的导航和操作按钮，如返回、查看更多等，使用户在页面间切换和获取信息操作简便。



## 三、功能介绍

- **城市筛选**：在首页展示省份列表，点击省份可查看其下城市列表，点击城市名称进入城市详情页，查看该城市空气质量。
- **空气质量展示**：城市详情页中，详细列出实时空气质量（包括 AQI、质量级别、首要污染物等多种指标）、24 小时和 14 天空气质量数据；站点详情页展示城市各站点空气质量详情。

## 五、安装使用方法

1. 从Gitee仓库克隆（或下载）该项目
2. 与项目该目录使用`npm install` 指令完成必要组件安装
3. 调节API，API Key在`main.js`中的`app.config.globalProperties.$myGlobalKey = 'YOUR KEY';`设置，相关API请到[聚合数据](https://www.juhe.cn/docs/api/id/796)网站中申请
4. 于项目该目录运行 `npm run dev` 指令运行项目

## 六、开源项目引用

- 本项目使用了 Element Plus（https://element-plus.org/）组件库，遵循其开源协议，在项目中通过引入和配置，借助其组件快速搭建页面结构，提升开发效率与界面质量。
- 本项目使用了**Axios**（[axios/axios: Promise based HTTP client for the browser and node.js](https://github.com/axios/axios)）组件，在项目中负责与后端 API 进行通信，确保数据的稳定获取和传输。
- 本项目使用了**[live2d-widget](https://github.com/stevenjoezhang/live2d-widget)**项目，为页面引入Live2D形象，提高网站的可互动性和有趣性。



该项目Gitee仓库地址：(https://gitee.com/aiWheat/vue-front-end-homework)
作者：MaiWheat[Maizongwheat (MaiWheat) - Gitee.com](https://gitee.com/MaiWheat)
个人网站（论坛）：[maiwheat.top](http://www.maiwheat.top/)

Live2D人偶项目地址：https://github.com/stevenjoezhang/live2d-widget

API项目地址：[全国城市空气质量_全国城市空气质量API接口_免费API接口_聚合数据 - 天聚地合](https://www.juhe.cn/docs/api/id/796)

该项目所用图片来源于网络和AI绘图，如有问题请联系删除