# waterlevel-front

**Repository Path**: shaoyu1007/waterlevel-front

## Basic Information

- **Project Name**: waterlevel-front
- **Description**: 水位监测平台前端 (Water Level Monitoring Platform Frontend)

一个基于Vue 3的水位监测平台前端项目，用于实时监控和管理水位数据。

- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-12-21
- **Last Updated**: 2025-09-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 水位监测平台前端 (Water Level Monitoring Platform Frontend)

一个基于Vue 3的水位监测平台前端项目，用于实时监控和管理水位数据。

## 技术栈

- **前端框架**: Vue 3 (使用Composition API)
- **构建工具**: Vite 4
- **状态管理**: Pinia 2
- **路由管理**: Vue Router 4
- **UI组件库**: Element Plus 2
- **工具库**: VueUse 12
- **图表库**: ECharts 5
- **实时通信**: SockJS (WebSocket)
- **HTTP请求**: Axios
- **CSS框架**: Bootstrap 5

## 功能特性

- 用户认证与授权系统
- 实时水位数据监控仪表盘
- 设备管理与配置
- 用户权限管理
- 消息通知系统
- 数据可视化与报表
- 响应式设计，支持多种设备

## 项目结构

```
water-level-monitoring-platform-front/
├── public/              # 静态资源目录
├── src/                 # 源代码目录
│   ├── api/             # API接口定义和服务
│   ├── assets/          # 静态资源（图片、样式等）
│   ├── router/          # 路由配置
│   ├── stores/          # Pinia状态存储
│   ├── utils/           # 工具函数
│   ├── views/           # 页面组件
│   │   ├── admin/       # 管理员页面
│   │   ├── dashboard/   # 仪表板页面
│   │   ├── device/      # 设备管理页面
│   │   ├── layout/      # 布局组件
│   │   ├── login/       # 登录相关页面
│   │   ├── message/     # 消息相关页面
│   │   ├── monitor/     # 监控页面
│   │   ├── settings/    # 设置页面
│   │   └── user/        # 用户相关页面
│   ├── App.vue          # 根组件
│   └── main.js          # 入口文件
├── .env                 # 环境变量
├── .env.development     # 开发环境变量
├── .env.production      # 生产环境变量
├── index.html           # HTML模板
├── vite.config.js       # Vite配置
└── package.json         # 项目依赖和脚本
```

## 环境要求

- Node.js >= 16.0.0
- npm >= 7.0.0 或 yarn >= 1.22.0

## 安装与设置

1. 克隆仓库
```sh
git clone <仓库地址>
cd water-level-monitoring-platform-front
```

2. 安装依赖
```sh
npm install
# 或
yarn
```

3. 配置环境变量
- 复制并根据需要修改环境变量文件：
  - `.env.development` 用于开发环境
  - `.env.production` 用于生产环境

## 开发

启动开发服务器：
```sh
npm run dev
# 或
yarn dev
```
开发服务器将在 http://localhost:3000 启动

## 构建

构建生产版本：
```sh
npm run build
# 或
yarn build
```
构建输出将生成在 `dist` 目录中

## 预览构建结果

预览构建后的应用：
```sh
npm run preview
# 或
yarn preview
```

## 后端API配置

项目通过Vite的代理功能连接到后端API：
- 默认后端地址: `http://localhost:8080`
- API请求前缀: `/api`
- WebSocket连接: `/ws`

可在 `vite.config.js` 文件中修改代理配置。

## 性能优化

项目已配置以下性能优化措施：
- 手动chunks分割（Element Plus, ECharts, Vue相关库）
- 动态导入优化
- 资源预加载

## 浏览器兼容性

支持所有现代浏览器（Chrome, Firefox, Safari, Edge等）

## 推荐IDE设置

- [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) 扩展（禁用Vetur）