/vue-template-3.x

后台管理系统模版 - 基于 Ant Design Vue4.x 组件库 (注:数据由 msw 模拟)

Primary LanguageTypeScriptOtherNOASSERTION

Antd-Template-Vue 是一个基于 TypeScript + Vue3.x + Pinia + Ant-Design-Vue4.x + Vite 等技术栈，为开发中大型后台管理系统而提供开箱即用的解决方案，支持动态主题(Design Token)、动态菜单配置、路由权限校验、数据持久化储存，同时也提供完备的 TypeScript + ESLint + Volar 格式化和规范。查看文档

  • 轻量化: 仅预设基础访问页, 没有冗余 Demo 页
  • 多主题: 支持亮色风格、暗色风格、暗黑风格等
  • 多布局: 侧边菜单、顶部菜单、混合菜单等导航
  • 标签栏: 支持面包屑，支持多页签及其数据缓存
  • 现数据: 由 msw + 预设的 mock data 提供


技术栈

本项目需要一定前端基础知识，以便能处理一些常见的问题。建议在开发前先了解以下内容，这会非常有帮助:



开发环境

  • Pnpm 版本: >=7
  • Node 版本: ^18.18.0 || ^20.9.0 || >=21.1.0


如何使用

下载源码

# Download
git clone https://github.com/antd-templater/vue-template-3.x.git Antd-Template-Vue

安装依赖

# Enter project
cd Antd-Template-Vue

# Install denpendencies
pnpm install

本地启动

# Start develop server
pnpm dev

本地构建和预览

# Run build create dist
pnpm build

# Start server and preview
pnpm preview


高阶组件

组件 名称 描述 Demo 演示
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 详情 ↗