系列
前言
前期在 后台管理系统模版 选型中，我们选择了 Ant Design Vue 社区出品的 Ant Design Pro (Vue2) 作为我们的开发模板，后又基于实际业务场景的迭代升级，于是就有了 Vue2.x 版本的
- 后台管理模版： @antdvr/vue-template-2.x (private)
- 自定义组件库： @antdvr/library-2.x (private)
后来随着 TypeScript + Vue3 + Vite 逐渐成为前端开发的主流趋势，也得益于 Vue3 在前端开发上的优势，于是我们开始在业余时间重构 Vue3 版本。相比之前 Vue2 版本，我们提供了详尽的在线文档：
- 后台管理模版： @antdvr/vue-template-3.x (private)
- 自定义组件库： @antdvr/library-3.x (private)
- 在线预览 前往
- 在线文档 前往
简介
Antdv.pro (Vue3) 是一个基于 TypeScript + Vue3 + Pinia + Ant-Design-Vue4 + ESlint9 + Vite 等技术栈，为开发中大型后台管理系统而提供开箱即用的解决方案，支持动态主题(Design Token)、动态菜单配置、路由权限校验、数据持久化储存，同时也提供完备的 TypeScript + ESLint + Volar 风格格式和规范。
- 轻量化: 仅预设基础访问页, 没有冗余 Demo 页
- 多主题: 支持亮色风格、暗色风格、暗黑风格等
- 多布局: 侧边菜单、顶部菜单、混合菜单等导航
- 标签栏: 支持面包屑，支持多页签及其数据缓存
- 现数据: 由
msw+ 预设的 mock data 提供
指南
为了更便于 Antdv.pro 后台管理系统 的开发和迭代，我们提供了 参考文档
Theme 定制主题
- 主题配置
- 预设主题
- 组件主题
- 局部主题
Layout 布局介绍
- UserLayout
- BlankLayout
- BasicLayout
- PageFrame
- PageView
- RouteView
Router 路由配置
- TS 类型定义
- 动态路由配置
- 静态路由配置
- 定义外部路由
TypeScript 全局定义
- 项目级类型
- 业务数据模型
Environment 环境变量
- 预设变量
- 类型定义
- 如何使用
Axios 定义使用
- 请求拦截器
- 响应拦截器
- 实例定义器
- 接口定义规范
Test 测试工具
- Vitest
- Cypress
组件库
| 组件 | 名称 | 描述 |
|---|---|---|
| SIcon | 图标组件 | 支持 Props 中 type 字段，动态渲染 @ant-design/icons-vue 中图标，也支持 iconfont 配置 |
| SIconSelect | 图标选择器 | 图标 Selection 下拉框，默认使用 @ant-design/icons-vue 中图标作为选项，也支持自定义选项 |
| SEditCell | 单元格编辑框 | 表格 Cell 编辑框，支持 date-picker、input、select、textarea、tree-selec、s-icon-select 等组件适配 |
| SEllipsis | 文字省略提示 | 基于 ATooltip 的封装，支持实时计算内容是否超出父元素边界，是否需要文字省略和 Tooltip 提示 |
| STable | 表格组件 | 不是 ATable 的封装，支持 列拉伸/拖拽/属性配置，单元格合并/卡槽定义，Checkbox/Radio、内置分页等功能 |
| SForm | 表单组件 | 支持 Groups 配置渲染表单内容，也支持卡槽自定义组件。(Group: ARate、ARadio、AInput、ASwitch ...) |
| STree | 树形组件 | 借助 ATree 的 checkStrictly="true" 特性，重新实现了 勾选/选中/展开/异步加载 等逻辑，并扩展了其 API |
基于 Ant Design Vue 部分组件的封装和扩展，提供更适配桌面端的高阶组件 前往 Demo文档
开发规范
主要涵盖 项目指南、Vue3 组件、Git 规范、VSCode 配置等方面，前往查看
- 项目目录结构
- 项目依赖管理
- Vue3 组件规范
- Vue3 组件范式
- Git 分支管理
- Git 版本号管理
- Git Commit 规范
- Git Commit 校验
- Git Commit 辅助
- VSCode 插件推荐
- VSCode 开发配置
