一个基于ant-design-vue
,typescript
,vue-composition-api
实现的 vue3 风格的后台管理系统,用 vue3 的写法写 vue2
兼容 vue2 的浏览器,一切免费,不收取任何费用,请放心使用。后续定期提供更新及维护,可供参考与学习
目前在网上暂时没有找到相关的使用 composition-api 写的后台系统,所以就把自己写的分享出来,后续会陆续加上新的功能,并且等vue3
完全稳定的时候
会提供vue3
版本,该项目后续切换 vue3 的成本相对较低,后续会做成一键切换 2 和 3 的版本
最大的原因是我们还要兼容ie10
和ie11
,ie9
需要自己修改 css 兼容性,就算 vue3
稳定下来最多也就支持ie11
,所以使用了vue-composition-api
进行开发
Node.js
: >= v10yarn
: 最新
Git
: 最新 代码管理Visual Studio Code
(VSCode): 最新 IDE
VSCode 插件
Vetur
: vue 开发必备GitLens
: Git 可视化工具ESLint
: 脚本代码检查stylelint
: 样式代码检查Prettier - Code formatter
:代码格式化
支持现代浏览器及 IE10+
IE / Edge |
Firefox |
Chrome |
Safari |
---|---|---|---|
IE10, IE11, Edge | last 2 versions | last 2 versions | last 2 versions |
git config core.ignorecase false # 使git对文件名大小写敏感
// 拉取项目代码
git clone https://github.com/anncwb/vben-admin.git
cd vben-admin
// 最好使用yarn,否则热更新可能出现问题
yarn install
yarn serve
同时会生成文件名 window-glob.js
配置文件,项目配置可以动态修改该文件实时更新代码变量,比如接口地址
yarn build # 打包 会使用hardSource进行打包
yarn build:no-cache # 打包 不会使用hardSource进行打包
yarn report # 生成构建包表表预览
yarn test:unit # --watch : 跟踪文件变化
yarn lint:stylelint # 样式格式化
yarn lint:prettier # js/ts代码格式化
yarn reinstall # 删除依赖重新装,兼容window
yarn preview # 本地进行打包预览
yarn log # 生成CHANGELOG
-
feat
增加新功能fix
修复问题/BUGstyle
代码风格相关无影响运行结果的perf
优化/性能提升refactor
重构revert
撤销修改test
测试相关docs
文档/注释chore
依赖更新/脚手架配置修改等workflow
工作流改进ci
持续集成mod
不确定分类的修改wip
删除文件
├── build # 构建任务相关
├── dist # 生成的部署文件目录
├── public # 静态文件目录
├── mock # 模拟数据目录
├── config # 项目构建配置文件
├── src # 源码目录
│ │── api # 接口
│ │── assets # 静态资源文件目录, 使用到的会被解析处理(比如图片等)
│ │── components # 提取的复用组件(文件夹分类, 未分类的基本就是基础组件了)
│ │── setting # 配置目录
│ │── enums # 枚举目录
│ │── common # 共用文件目录
│ │── router # 路由及菜单配置
│ │── design # 样式
│ │── hooks # vue3 组合式api
│ │── store # 状态管理
│ │ └── modules # 各模块状态管理
│ │── types # ts 接口/申明文件
│ │── utils # 工具集(业务无关, 一般为幂等函数/单例对象/Class...)
│ │── setup # 项目初始配置
│ └── views视图
├── tests # 测试用例目录
│ └── unit # unit 测试(jest): https://jestjs.io
├── ... # 其他配置文件
└── vue.config.js # 配置入口(vue cli)
- Fork 代码!
- 创建自己的分支:
git checkout -b feat/xxxx
- 提交你的修改:
git commit -am 'feat(function): add xxxxx'
- 推送您的分支:
git push origin feat/xxxx
- 提交
pull request
由于开发时间较短,所以功能暂时较少
后续会逐步完善,有需要什么组件可以提出来
-
项目搭建(基于 vue-cli4)已经优化
-
首屏加载等待动画
-
登录和注销
-
菜单(可以搜索及拖拽以及菜单布局)
-
多标签页(面包屑没做,后续可以加)
-
基于角色的权限管理
-
基于后台的权限管理
-
分离的路由和菜单设置
-
可折叠侧边栏
-
可拖拽侧边栏
-
多标签页模式/全局控制
-
支持菜单 svg 图标
-
菜单搜索
-
页面加载 loading/页面超时组件
-
滚动条组件
-
懒加载组件
-
弹窗扩展(可拖拽,全屏,自适应高度)
-
全屏
-
自动注册 SVG 图标
-
模拟数据
-
剪贴板封装
-
hook 封装
-
图表库
-
数字动画
-
首页设计
-
项目可配置
-
主题配置
-
[] 组件封装(目前想到的只有 modal table form upload 等) 其余的可以在向我提出
-
[] 常用页面实现及例子
-
[] 工具封装
-
[] vue3 一键切换
-
更多功能
VBEN_ADMIN
是完全开源免费的项目,旨在帮助开发者更方便地进行管理系统开发,同时也提供 QQ 交流群(由于项目刚开始几天,群还没什么人,有兴趣的可以加群一起讨论),使用问题欢迎在群内提问。
- QQ 群
569291866