管理端
vue3-element-admin 是基于 Vue 3、Vite、TypeScript 和 Element Plus 的 PC 管理端，内置登录鉴权、动态路由、菜单权限、常用组件和后台管理基础功能。
开发路径
| 阶段 | 推荐入口 | 说明 |
|---|---|---|
| 1. 跑起来 | 快速开始 | 安装依赖、启动开发服务、构建预览 |
| 2. 看结构 | 项目结构 | 了解目录、关键文件和模块边界 |
| 3. 接后端 | 接口请求 | 配置接口地址、Token、错误处理和代理 |
| 4. 配菜单权限 | 路由和菜单 / 权限控制 | 理解动态路由、按钮权限和数据权限 |
| 5. 做业务页面 | CURD 快速开发 / 组件总览 | 用组件和配置快速落地页面 |
| 6. 上线部署 | 构建和部署 | 打包、Nginx、跨域和部署检查 |
界面预览
组件入口
| 场景 | 推荐组件 | 说明 |
|---|---|---|
| 快速做增删改查页面 | CURD 快速开发 | 搜索、表格、弹窗和页面逻辑组合 |
| 表单里选择字典值 | DictSelect | 自动加载字典项，支持单选和多选 |
| 表格里展示字典标签 | DictTag | 将字典值翻译成可读标签 |
| 从弹窗表格里选数据 | TableSelect | 适合关联选择、用户选择、角色选择等场景 |
| 上传图片或文件 | Upload 上传 | 单图、多图和文件上传 |
| 查看全部组件 | 组件总览 | 按分类查找组件文档 |
核心模块速查
| 模块 | 关键位置 | 说明 |
|---|---|---|
| HTTP 请求 | src/utils/request.ts | Axios 封装、Token 注入、错误处理 |
| 路由守卫 | src/router/guards/ | 登录校验、动态路由加载、页面权限控制 |
| 菜单路由 | src/router/ | 静态路由、动态路由、菜单映射 |
| 状态仓库 | src/store/modules/ | 用户、权限、设置等 Pinia Store |
| 类型定义 | src/types/ | 全局类型、接口 DTO、业务类型 |
| 常量枚举 | src/constants/、src/enums/ | 系统常量、枚举值、缓存 Key |
| 组合式函数 | src/composables/ | SSE、字典同步、表格选择等复用逻辑 |
| 环境变量 | .env.* | 接口地址、端口、Mock、功能开关 |
| 构建配置 | vite.config.ts | 插件、代理、别名、构建优化 |
常见二开路径
| 需求 | 推荐阅读 |
|---|---|
| 接自己的后端 | 环境配置 → 接口请求 → API 契约 |
| 改菜单和权限 | 路由和菜单 → 权限控制 |
| 新增业务页面 | 项目结构 → CURD 快速开发 |
| 移除登录或动态路由 | 移除登录 / 移除动态路由 |
| 上线部署 | 构建和部署 → 跨域问题 |