# ul-frontend-template

**Repository Path**: ulinker/ul-frontend-template

## Basic Information

- **Project Name**: ul-frontend-template
- **Description**: 前端模板
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

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

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue 企业级管理系统模板

一个基于 Vue 3 + TypeScript + Element Plus 的现代化企业级后台管理系统模板，具备完整的权限管理、国际化、主题切换等功能。

![预览](images/01.gif)

## ✨ 特性

- 🎯 **最新技术栈**：Vue 3 + TypeScript + Vite 4 + Element Plus
- 🔐 **权限管理**：完整的 RBAC 权限系统，支持页面权限、按钮权限
- 🌍 **国际化**：内置中英文支持，可扩展多语言
- 🎨 **主题切换**：支持明暗主题，自动跟随系统
- 📱 **响应式设计**：完美适配移动端和桌面端
- 🚀 **性能优化**：路由懒加载、组件懒加载、打包优化
- 📦 **组件丰富**：二次封装常用组件，开箱即用
- 🔄 **Mock 数据**：内置 Mock 系统，支持前后端分离开发
- 📊 **可视化图表**：集成 ECharts，支持多种图表类型
- 🛠 **开发工具**：ESLint + TypeScript 严格模式，保证代码质量

## 🏗️ 技术栈

- **框架**：Vue 3.4+
- **语言**：TypeScript 5.0+
- **构建工具**：Vite 5.0+
- **UI 库**：Element Plus 2.4+
- **状态管理**：Pinia 2.1+
- **路由**：Vue Router 4.2+
- **HTTP 客户端**：Axios 1.6+
- **国际化**：Vue I18n 9.8+
- **图表库**：ECharts 5.4+
- **CSS 预处理器**：Sass
- **代码规范**：ESLint + TypeScript ESLint
- **Mock 数据**：vite-plugin-mock + mockjs

## 📁 项目结构

```
vue-admin-template/
├── mock/                    # Mock 数据
│   ├── user.ts             # 用户相关接口
│   └── dashboard.ts        # 看板相关接口
├── public/                  # 静态资源
├── src/
│   ├── api/                # API 接口
│   ├── assets/             # 静态资源
│   ├── components/         # 公共组件
│   ├── layout/             # 布局组件
│   │   ├── components/     # 布局子组件
│   │   └── index.vue       # 主布局
│   ├── locales/            # 国际化文件
│   │   ├── zh-cn.ts        # 中文
│   │   └── en.ts           # 英文
│   ├── router/             # 路由配置
│   │   ├── index.ts        # 路由主文件
│   │   └── routes.ts       # 路由配置
│   ├── stores/             # 状态管理
│   │   ├── app.ts          # 应用状态
│   │   ├── user.ts         # 用户状态
│   │   └── permission.ts   # 权限状态
│   ├── styles/             # 样式文件
│   │   ├── index.scss      # 主样式
│   │   ├── variables.scss  # 变量
│   │   ├── reset.scss      # 重置样式
│   │   ├── element.scss    # Element Plus 样式覆盖
│   │   └── transition.scss # 动画样式
│   ├── types/              # TypeScript 类型定义
│   │   ├── user.ts         # 用户相关类型
│   │   └── common.ts       # 通用类型
│   ├── utils/              # 工具函数
│   │   ├── request.ts      # HTTP 请求封装
│   │   ├── index.ts        # 通用工具函数
│   │   ├── permission.ts   # 权限工具
│   │   └── storage.ts      # 存储工具
│   ├── views/              # 页面组件
│   │   ├── dashboard/      # 看板页面
│   │   ├── system/         # 系统管理
│   │   │   ├── user/       # 用户管理
│   │   │   ├── role/       # 角色管理
│   │   │   ├── permission/ # 权限管理
│   │   │   └── department/ # 部门管理
│   │   ├── login/          # 登录页面
│   │   ├── profile/        # 个人中心
│   │   └── error/          # 错误页面
│   ├── App.vue             # 根组件
│   └── main.ts             # 入口文件
├── .env.development        # 开发环境变量
├── .env.production         # 生产环境变量
├── vite.config.ts          # Vite 配置
├── tsconfig.json           # TypeScript 配置
└── package.json            # 依赖配置
```

## 🚀 快速开始

### 环境要求

- Node.js >= 18.0.0
- pnpm >= 8.0.0 (推荐) 或 npm >= 9.0.0

### 安装依赖

```bash
# 使用 pnpm (推荐)
pnpm install

# 或使用 npm
npm install
```

### 启动开发服务器

```bash
# 启动开发服务器
pnpm dev

# 或使用 npm
npm run dev
```

### 构建生产版本

```bash
# 构建生产版本
pnpm build

# 或使用 npm
npm run build
```

### 预览生产版本

```bash
# 预览生产版本
pnpm preview

# 或使用 npm
npm run preview
```

## 🔧 配置说明

### 环境变量

项目支持多环境配置，通过 `.env` 文件管理：

- `.env.development`：开发环境
- `.env.production`：生产环境

```bash
# 应用标题
VITE_APP_TITLE=企业级管理系统

# API 基础地址
VITE_API_BASE_URL=http://localhost:8080

# 是否使用 Mock 数据
VITE_USE_MOCK=true

# 文件上传地址
VITE_UPLOAD_URL=http://localhost:8080/upload
```

### Mock 数据切换

项目内置 Mock 数据系统，支持本地开发和真实后台接口的无缝切换：

1. **启用 Mock**：设置 `VITE_USE_MOCK=true`
2. **禁用 Mock**：设置 `VITE_USE_MOCK=false`，并配置 `VITE_API_BASE_URL`

## 🎯 核心功能

### 权限管理

- **角色权限**：支持多角色分配，灵活的权限控制
- **菜单权限**：动态菜单生成，根据权限显示
- **按钮权限**：页面内按钮级别的权限控制
- **路由权限**：基于角色的路由访问控制

### 国际化

- 支持中英文切换
- 可扩展多语言
- 语言状态持久化存储

### 主题系统

- 明亮/暗黑主题切换
- 自动跟随系统主题
- 主题状态持久化存储

### 布局系统

- 响应式布局，适配移动端
- 侧边栏折叠/展开
- 标签页导航
- 面包屑导航

## 📊 系统模块

### 看板 (Dashboard)

- 数据统计卡片
- 趋势图表展示
- 实时监控面板
- 最新动态列表

### 系统管理

- **用户管理**：用户增删改查、角色分配、状态管理
- **角色管理**：角色增删改查、权限分配
- **权限管理**：权限树形管理、动态权限配置
- **部门管理**：部门树形结构、人员分配

## 🛠 开发指南

### 新增页面

1. 在 `src/views/` 下创建页面组件
2. 在 `src/router/routes.ts` 中添加路由配置
3. 如需权限控制，在路由 meta 中配置 roles

### 新增 API

1. 在 `src/api/` 下创建 API 文件
2. 使用封装好的 `request` 工具发起请求
3. 在 `mock/` 下添加对应的 Mock 数据

### 新增组件

1. 在 `src/components/` 下创建组件
2. 编写 TypeScript 类型定义
3. 添加必要的文档和示例

## 📝 开发规范

### 代码规范

- 使用 TypeScript 严格模式
- 遵循 ESLint 规则
- 组件使用 Composition API
- 状态管理使用 Pinia

### 命名规范

- 文件名：kebab-case
- 组件名：PascalCase
- 函数名：camelCase
- 常量名：UPPER_SNAKE_CASE

### Git 提交规范

```bash
feat: 新功能
fix: 修复问题
docs: 文档修改
style: 代码格式修改
refactor: 代码重构
test: 测试相关
chore: 构建过程或辅助工具的变动
```

## 🔗 相关链接

- [Vue 3 文档](https://vuejs.org/)
- [TypeScript 文档](https://www.typescriptlang.org/)
- [Element Plus 文档](https://element-plus.org/)
- [Vite 文档](https://vitejs.dev/)
- [Pinia 文档](https://pinia.vuejs.org/)

## 📄 许可证

[MIT License](LICENSE)

## 🤝 贡献

欢迎提交 Issue 和 Pull Request！

## 📞 联系方式
***UKIOT.group***

如有问题，请提交 Issue 或联系开发团队。