Explorez la documentation de ce projet »
Aperçu en ligne · Signaler des bugs · Faire des suggestions
vue3-basic-admin Terminé : vue3-basic-admin
est un système de gestion mid-end et back-end open source prêt à l'emploi. Développé sur la base de technologies grand public telles que Vue3
, Vite
, Element-Plus
, TypeScript
, Pinia
, etc., il possède de nombreux composants intégrés qui peuvent être utilisés immédiatement, ce qui permet de créer rapidement un système de gestion intermédiaire et back-end. . Il est actuellement décidé d'être complètement open source. Si ce projet vous est utile, vous pouvez cliquer sur une étoile, et si vous avez une certaine capacité financière, vous pouvez offrir une tasse de café à l'auteur. ! Bienvenue dans la prévisualisation et l'utilisation : vue3-basic-admin
1.优化之前版本的权限控制,菜单通过角色控制,可以给用户对应的角色和多角色 2.优化mock数据部分,建立用户常量和角色常量 3.添加tag标签页鼠标滚动功能 4.添加真正的整体换肤功能 5.添加外链 6.添加可视化图,饼图,柱状图等拖拽
vue-antd-admin est un système de gestion backend développé sur la base de vue+ant-design-vue. Il inclut le routage dynamique + la gestion des autorisations pour résoudre les problèmes d'autorisation des utilisateurs, et fournit des autorisations fixes de base : administrateur, test, éditeur et autorisations utilisateur personnalisées, qui peut être personnalisé Définissez et modifiez le menu correspondant au rôle. Vous pouvez définir plusieurs rôles pour l'utilisateur. La mise en page propose deux mises en page : une mise en page à gauche et à droite et une mise en page en haut et en bas, qui peuvent être commutées librement. dans des thèmes mixtes, des thèmes clairs et des thèmes sombres, qui peuvent être commutés à volonté ; il existe également des backends Fonctions couramment utilisées du système de gestion telles que les formulaires, les tableaux, etc. ;
过一段时间后才发现忘记放测试账号和密码了,哈哈哈 1. 用户名:admin 密码 任意6位数 (如果你喜欢,可以用123456) 拥有admin的权限可以查看所有页面 2. 用户名:test 密码 任意6位数 (如果你喜欢,可以用123456) 拥有test的页面权限,可以查看部分页面 3. 用户名:editor 密码 任意6位数 (如果你喜欢,可以用123456) 拥有editor的页面权限,可以查看富文本等页面 4. 使用手机号验证码登录 ,默认拥有admin的权限
La version de base du backend node+express+mysql a été implémentée, adresse : vue-antd-server
version de réaction, adresse : reacct-antd-admin
Ce projet est développé en utilisant vue+vue-cli4+vuex+ant-design-vue et axios. Les données sont simulées à l'aide de mock.js. Plus tard, nous prévoyons d'utiliser node pour écrire le backend ;
Webpack a été grandement optimisé et le premier écran se charge plus rapidement ;
Le système dispose d'affichages cartographiques intégrés et de cartes arcgis couramment utilisées dans les graphiques électroniques ;
Test unitaire de plaisanterie utilisé, la couverture actuelle est encore relativement faible, je l'écrirai quand j'aurai le temps ;
Pour le formatage, ESlint+prettier est utilisé.
- 登录 用户名密码/手机号验证码 - 权限 - 动态路由 - 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
Démo en ligne
Ce projet faisait référence à vue-element-admin et ant-design-pro, et a trouvé de nombreuses méthodes et méthodes d'écriture utiles. Il est recommandé que si vous souhaitez vraiment améliorer votre niveau de codage, vous puissiez consulter le code des grands. L'open source n'est pas facile. Si vous pensez que ce projet vous est utile, vous pouvez cliquer sur une étoile. Les suggestions et les bugs sont les bienvenus.