# vue3-template

**Repository Path**: gaspar1986/vue3-template

## Basic Information

- **Project Name**: vue3-template
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-28
- **Last Updated**: 2025-10-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue3 Enterprise Admin

一个基于 Vue 3 + TypeScript + Element Plus 的企业级工作台前端项目，采用模块化设计和前后端分离架构。

## 功能特性

- 📦 **模块化设计**：采用模块化的目录结构和代码组织方式
- 🔐 **权限控制**：完善的权限控制系统，包括菜单权限和功能权限
- 🌓 **主题切换**：支持明暗主题切换，提供良好的视觉体验
- 📊 **数据可视化**：集成 ECharts 图表库，支持各种数据可视化需求
- 🧩 **组件封装**：封装了大量的业务组件，提高开发效率
- 📝 **表单系统**：强大的表单系统，支持各种复杂表单场景
- 📋 **表格系统**：灵活的表格系统，支持各种复杂表格场景
- 🔍 **搜索系统**：灵活的搜索系统，支持各种复杂搜索场景
- 🌐 **国际化**：支持多语言切换，满足国际化需求
- 📱 **响应式设计**：适配不同屏幕尺寸，提供良好的用户体验

## 技术栈

- **核心框架**: Vue 3 (Composition API)
- **语言**: TypeScript
- **UI 组件库**: Element Plus
- **状态管理**: Pinia
- **路由管理**: Vue Router 4
- **HTTP 客户端**: Axios
- **构建工具**: Vite
- **样式预处理器**: Sass/SCSS
- **代码质量工具**: ESLint + Prettier
- **图表库**: ECharts
- **模拟数据**: Mock.js

## 快速开始

### 环境要求

- Node.js >= 16.0.0
- npm >= 7.0.0

### 安装依赖

```bash
npm install
```

### 开发环境运行

```bash
npm run dev
```

### 构建生产环境

```bash
npm run build
```

### 代码格式化

```bash
npm run lint
```

## 项目结构

```
src/
├── api/                    # 接口封装
│   ├── app/               # 应用相关API
│   └── constant.ts        # API常量配置
├── assets/                 # 静态资源
│   ├── audio/             # 音频文件
│   ├── icons/             # SVG图标
│   ├── style/             # 样式文件
│   └── fonts/             # 字体文件
├── components/            # 可复用组件
│   ├── Table/             # 表格组件
│   └── ...                # 其他通用组件
├── directives/             # 自定义指令
├── router/                 # 路由配置
│   ├── modules/           # 路由模块
│   ├── index.ts           # 路由首页
│   └── dynamicRouter.ts   # 动态路由
├── store/                  # 状态管理
│   ├── modules/           # 状态模块
│   └── index.ts           # 状态模块
├── utils/                  # 工具函数
├── views/                  # 页面组件
│   ├── home/              # 首页模块
│   └── ...                # 其他页面模块
├── App.vue                 # 根组件
└── main.ts                 # 入口文件
```

## 开发规范

### 代码规范

- 使用 TypeScript 进行类型检查
- 遵循 ESLint 和 Prettier 规则
- 组件命名使用 PascalCase
- 变量命名使用 camelCase
- 常量命名使用 UPPER_CASE

### 组件开发规范

- 使用 Composition API
- 组件 props 需定义类型
- 组件需有明确的 name 属性
- 组件样式使用 scoped
- 组件需提供类型声明
- 尽可能使用 hooks 函数，编写业务逻辑

### 状态管理规范

- 模块命名使用小写加连字符
- action 类型使用常量定义
- 定义 ref，reactive 变量，return 结果，export default 导出

### 路由规范

- 路由路径使用 kebab-case
- 路由组件按功能模块划分
- 路由元信息包含权限控制

## 许可证

[MIT](LICENSE)