vue antd admin
1.0.0
Explore the documentation for this project »
Preview online · Report bugs · Make suggestions
vue3-basic-admin Completed: vue3-basic-admin is an open source out-of-the-box mid- and back-end management system. Developed based on mainstream technologies such as Vue3 , Vite , Element-Plus , TypeScript , Pinia , etc., it has many built-in components that can be used out of the box, which can quickly build a middle and back-end management system. It is currently decided to be completely open source. If this project is helpful to you, you can Click a star, and if you have a certain financial capacity, you can treat the author to a cup of coffee. Open source is not easy! Welcome to preview and use: vue3-basic-admin
1.优化之前版本的权限控制，菜单通过角色控制，可以给用户对应的角色和多角色 2.优化mock数据部分，建立用户常量和角色常量 3.添加tag标签页鼠标滚动功能 4.添加真正的整体换肤功能 5.添加外链 6.添加可视化图，饼图，柱状图等拖拽
vue-antd-admin is a backend management system developed based on vue+ant-design-vue. It includes dynamic routing + permission management to solve user permission problems, and provides basic fixed permissions: admin, test, editor and customized user permissions, which can be customized Define and modify the menu corresponding to the role. You can define multiple roles for the user. The layout provides two layouts: left and right layout and top and bottom layout, which can be switched freely. The system has built-in mixed themes, light themes, and dark themes, which can be switched at will; there are also some backends Commonly used functions of the management system such as forms, tables, etc.;
过一段时间后才发现忘记放测试账号和密码了，哈哈哈 1. 用户名：admin 密码 任意6位数 （如果你喜欢，可以用123456） 拥有admin的权限可以查看所有页面 2. 用户名：test 密码 任意6位数 （如果你喜欢，可以用123456） 拥有test的页面权限，可以查看部分页面 3. 用户名：editor 密码 任意6位数 （如果你喜欢，可以用123456） 拥有editor的页面权限，可以查看富文本等页面 4. 使用手机号验证码登录 ，默认拥有admin的权限
The basic version of node+express+mysql backend has been implemented, address: vue-antd-server
react version, address: reacct-antd-admin
This project is developed using vue+vue-cli4+vuex+ant-design-vue and axios. The data is simulated using mock.js. Later, we plan to use node to write the backend;
Webpack has been greatly optimized, and the first screen loads faster;
The system has built-in chart displays and arcgis maps commonly used in echarts;
Used jest unit test, the current coverage is still relatively low, I will write it when I have time;
For formatting, ESlint+prettier is used.
- 登录 用户名密码/手机号验证码 - 权限 - 动态路由 - 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
Online Demo
This project referred to vue-element-admin and ant-design-pro, and found many useful writing methods and methods. It is recommended that if you really want to improve your coding level, you can look at the code of the big guys. Open source is not easy. If you think this project is useful to you, you can click a star. Suggestions and bugs are welcome.
