vue antd admin
1.0.0
探索本項目的文件»
線上預覽 · 提出Bug · 提出建議
vue3-basic-admin 已完成： vue3-basic-admin是一款開源開箱即用的中後台管理系統。基於Vue3 、 Vite 、 Element-Plus 、 TypeScript 、 Pinia等主流技術開發，內建許多開箱即用的元件，能快速建構中後台管理系統，目前決定完全開源，如果角色該專案對你有所幫助，可以點一個star,如果有一定的經濟能力，可以請作者喝一杯咖啡，開源不易！ 歡迎預覽和使用：vue3-basic-admin
1.优化之前版本的权限控制，菜单通过角色控制，可以给用户对应的角色和多角色 2.优化mock数据部分，建立用户常量和角色常量 3.添加tag标签页鼠标滚动功能 4.添加真正的整体换肤功能 5.添加外链 6.添加可视化图，饼图，柱状图等拖拽
vue-antd-admin是一個後台管理系統，基於vue+ant-design-vue開發，包含動態路由+權限管理解決使用者權限問題，提供基礎固定權限：admin、test、editor和自訂使用者權限，可自訂修改角色對應的選單,可訂使用者多角色，佈局方面提供左右佈局和上下佈局兩種，可自由切換；系統內建了混合主題、淺色主題，深色主題，可隨意切換；還有一些後台管理系統常用的功能如表單，table表等；
过一段时间后才发现忘记放测试账号和密码了，哈哈哈 1. 用户名：admin 密码 任意6位数 （如果你喜欢，可以用123456） 拥有admin的权限可以查看所有页面 2. 用户名：test 密码 任意6位数 （如果你喜欢，可以用123456） 拥有test的页面权限，可以查看部分页面 3. 用户名：editor 密码 任意6位数 （如果你喜欢，可以用123456） 拥有editor的页面权限，可以查看富文本等页面 4. 使用手机号验证码登录 ，默认拥有admin的权限
已實作基礎版node+express+mysql後台，位址：vue-antd-server
react版本，位址：reacct-antd-admin
本專案採用vue+vue-cli4+vuex+ant-design-vue和axios開發，資料採用mock.js進行模擬,後期打算使用node寫後台；
webpack大幅優化了下，首屏載入速度更快；
系統內建了echarts常用的圖表展示和arcgis地圖；
使用了jest單元測試，目前覆蓋率還比較低，有時間再寫；
格式化方面採用ESlint+prettier。
- 登录 用户名密码/手机号验证码 - 权限 - 动态路由 - echarts各种图表 - arcgis地图 - 克里金插值分析图 - 全景图 - 富文本 - Markdown - 错误页面 403 404 500 - 个人设置 - 系统设置 - 更换主题 - 两种布局方式 - 面包屑 - 标签页 - webSocket - svg图标 - 全屏 - 返回顶部 - webpack优化 - 抽奖页 - table表 - form表单 - 上传Excel - 上传头像和裁剪 - htmlcanvas2截屏 - 封装自定义loading
- 关闭生产环境sourceMap; - 关闭预加载(vue会预加载后面的页面，会导致首屏加载比较慢) - g-zip压缩(需要nginx配置); - 生产环境CDN加载部分插件 - 去除生产环境console和debugger; - 公共代码抽离 - 打包大小分析 - 打包缓存 - 部分依赖使用异步cdn加载
- 拥有 admin、test和editor三种权限，每个权限对应的路由和左侧菜单不同； - 点击个人设置个性化或者右边设置，可以更改页面的设置，如果标签页是否开启，布局方式,主题颜色等； - 系统管理员拥有所有权限，可以更改用户对应的菜单路由和角色对应的权限。 ......
├── mock ---mock模拟数据 ├── public ---静态资源文件 ├── src │ ├── api ---接口 │ ├── assets ---图片 │ ├── components ---可复用的vue组件 │ ├── layouts ---布局方式 │ ├── router ---路由 │ ├── store ---vuex │ ├── styles ---sass样式 │ ├── utils ---方法函数 │ ├── vendor ---导出excel │ ├── views ---页面 │ ├── App.vue │ ├── main.js │ ├── permission.js ---路由拦截 ├── tests ---单元测试文件 ├── .browserslistrc ├── .env ├── .eslintrc.js ├── babel.config.js ├── .jest.config.js ---jest的配置 ├── package.json ├── package-lock.json ├── README.md └── vue.config.js ---webpack的配置
# 克隆项目 git clone https://github.com/biubiubiu01/vue-antd-admin.git # 进入项目目录 cd vue-antd-admin # 安装依赖 npm install # 本地开发 启动项目 npm run serve
# 打包项目 npm run build # 单元测试 npm run test:unit
線上Demo
這個專案參考了vue-element-admin 和ant-design-pro,發現了很多好用的寫法和方法，建議如果真想提升自己的程式碼水平，可以多看看大佬們的程式碼。 開源不易，若覺得這個專案對你有用，可以點個star，歡迎提出建議和bug ? 。
