快速开发
提供了完整版参考代码和精简版开发代码
拉取完整版参考代码:
git clone https://github.com/Kele-Bingtang/kbt-vue3-admin.git
。拉取精简版开发代码:
git clone https://github.com/Kele-Bingtang/kbt-vue3-template.git
可切换分支,master 为国际化,no-i18n 为非国际化。
拥有丰富的 Features,并持续更新
满足大部分开发场景。
最新流行稳定技术栈
基于 Vue3.2、TypeScript、Vite4、Pinia、Element-Plus 等最新技术栈开发
简单上手 & 学习
项目结构清晰,代码简单、易读。
规范工程化工作流
配置 Eslint、Prettier、Husky、Commitlint、Lint-staged 规范前端工程代码规范。
完善的打包优化方案
内置规范的打包目录,提供打包压缩功能,减少打包体积。
丰富的组件
提供丰富的通用组件、业务组件。
常用 Hook 函数
提供丰富的组件、常用 Hooks 封装,实现复用思想,减少重复开发,提高效率。
个性化主题配置
提供主题颜色配置,暗黑、灰色、色弱等模式切换。
多种布局配置
提供多种布局、标签栏切换,布局显隐,满足大部分场景。
项目权限管控
采用 RBAC 权限管控,提供菜单、路由及按钮粗细粒度权限管理方案
国际化
内置常用国际化转换函数,支持自定义国际化切换,
IFrame 嵌入
提供 IFrame 嵌入、缓存功能,支持门户 Portal 布局。
自定义指令
内置多种 Vue 自定义指令,提供傻瓜式指令一键注册功能。
Axios 封装
基于 Axios 封装常用请求模块,内置业务拦截器、异常拦截器。
多种图标类型
支持 IconFont、SVG、Iconify 等多种图标类型渲染。
布局
多种布局、标签栏切换,布局组件显隐
六大布局
内置纵向、经典、横向、分栏、混合、子系统六大布局切换
深色模式
可以自由切换浅色模式与深色模式
主题色切换
支持自定义主题色并允许用户在预设的主题颜色之间切换
布局组件
支持图标、面包屑、导航栏等组件显隐,内置缓存功能,记住用户的布局配置
通用组件
分页组件
进一步封装 ElementPlus 分页,支持分页后回滚当前位置
富文本组件
封装 WangEditor、Tinymce 富文本,支持文字、图片、音频、附件等功能
气泡文字提示组件
进一步封装 el-tooltip,实现文字超出时自动显示省略号并气泡提示
Excel、图片上传组件
封装 Excel、图片上传组件
超级表格、超级表单组件
基于 el-table 和 el-form 封装的表格和表单组件,通过 ts 列配置项代码代替复杂的 template 标签
权限组件
内置权限组件,搭配角色、认证功能对 HTML 标签进行管控
Grid 组件
基于 CSS3 Grid 封装的组件,可以快速构建 Grid 布局
抽屉拖拽组件
基于 el-drawer 封装的可以拖拽的抽屉组件
消息提示组件
基于 el-message 封装的组件,支持原生 el-message 样式风格和 antd-message 样式风格
数字动画组件
基于 countup.js 封装的组件,让数字加载也有动画效果
代码编辑器组件
基于 Codemirror 封装的组件,可以在文本框写有高亮提示的代码,支持 Java、SQL、JavaScript 等流行语言。
二维码组件
支持二维码生成和解析。