# vite-element-plus-PWA

**Repository Path**: jiao-bingjie/vite-element-plus-pwa

## Basic Information

- **Project Name**: vite-element-plus-PWA
- **Description**: 一个基于 Vue 3 + Vite + Element Plus 构建的现代化 PWA（渐进式Web应用）管理系统模板
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-07-04
- **Last Updated**: 2025-07-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: vite, vue3, element-plus, Pwa

## README

# Vite Element Plus PWA 管理系统

一个基于 Vue 3 + Vite + Element Plus 构建的现代化 PWA（渐进式Web应用）管理系统模板。

## ✨ 特性

- 🚀 **Vue 3** - 使用最新的 Vue 3 Composition API
- ⚡ **Vite** - 极速的构建工具和开发服务器
- 🎨 **Element Plus** - 基于 Vue 3 的组件库
- 📱 **PWA 支持** - 可安装的渐进式Web应用
- 🔄 **自动导入** - 组件和API自动导入，提升开发效率
- 🛡️ **TypeScript 支持** - 完整的类型定义
- 📦 **状态管理** - 使用 Pinia 进行状态管理
- 🔐 **权限管理** - 完整的登录认证和路由守卫
- 📊 **数据可视化** - 预留图表组件接口
- 🎯 **响应式设计** - 适配各种屏幕尺寸

## 🏗️ 项目结构

```
src/
├── components/          # 公共组件
│   └── PWAInstallPrompt.vue  # PWA安装提示组件
├── layout/             # 布局组件
│   ├── index.vue       # 主布局
│   └── components/     # 布局子组件
│       ├── Header.vue  # 头部组件
│       ├── Sidebar.vue # 侧边栏组件
│       └── SidebarItem.vue # 侧边栏项组件
├── views/              # 页面组件
├── router/             # 路由配置
├── store/              # 状态管理
│   ├── index.js        # Pinia 实例
│   └── user.js         # 用户状态
├── utils/              # 工具函数
│   └── request.js      # HTTP请求封装
└── style.css           # 全局样式
```

## 🚀 快速开始

### 环境要求

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

### 安装依赖

```bash
npm install
# 或
yarn install
```

### 开发模式

```bash
npm run dev
# 或
yarn dev
```

访问 [http://localhost:8080](http://localhost:8080) 查看应用

### 构建生产版本

```bash
npm run build
# 或
yarn build
```

### 预览生产版本

```bash
npm run preview
# 或
yarn preview
```

## 📦 主要依赖

### 核心依赖
- **Vue 3** - 渐进式JavaScript框架
- **Vue Router** - Vue.js官方路由管理器
- **Pinia** - Vue的状态管理库
- **Element Plus** - 基于Vue 3的组件库
- **Axios** - HTTP客户端

### 开发依赖
- **Vite** - 下一代前端构建工具
- **vite-plugin-pwa** - PWA插件
- **unplugin-auto-import** - 自动导入插件
- **unplugin-vue-components** - 组件自动导入插件

## 🔧 配置说明

### PWA 配置

项目已配置完整的PWA支持，包括：
- Service Worker 自动注册
- 应用清单文件（manifest.json）
- 离线缓存策略
- 安装提示组件

### 自动导入配置

- Element Plus 组件自动导入
- Vue 3 API 自动导入
- Vue Router 和 Pinia API 自动导入

### 代理配置

开发环境已配置API代理：
- `/api/*` -> `http://localhost:3000/*`
- `/upload/*` -> `http://localhost:3000/api/upload/*`

## 🔐 默认账号

- 用户名：`admin`
- 密码：`admin123`

## 📱 PWA 功能

本应用支持PWA功能，用户可以：
- 将应用安装到桌面
- 离线访问部分功能
- 接收推送通知（需要后端支持）

## 🤝 贡献指南

1. Fork 本仓库
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 打开 Pull Request

## 📄 许可证

本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情

## 🔗 相关链接

- [Vue 3 文档](https://v3.vuejs.org/)
- [Vite 文档](https://vitejs.dev/)
- [Element Plus 文档](https://element-plus.org/)
- [Pinia 文档](https://pinia.vuejs.org/)
- [PWA 指南](https://web.dev/progressive-web-apps/)