Entdecken Sie die Dokumentation zu diesem Projekt »
Online-Vorschau · Fehler melden · Vorschläge machen
vue3-basic-admin Abgeschlossen: vue3-basic-admin
ist ein sofort einsatzbereites Open-Source-Mid- und Back-End-Managementsystem. Es wurde auf der Grundlage gängiger Technologien wie Vue3
, Vite
, Element-Plus
, TypeScript
, Pinia
usw. entwickelt und verfügt über viele integrierte Komponenten, die sofort einsatzbereit sind und schnell ein Middle- und Back-End-Managementsystem aufbauen können . Es ist derzeit entschieden, dass dieses Projekt für Sie hilfreich ist, und wenn Sie über eine gewisse finanzielle Leistungsfähigkeit verfügen, ist es nicht einfach, dem Autor eine Tasse Kaffee zu gönnen ! Willkommen zur Vorschau und Verwendung: vue3-basic-admin
1.优化之前版本的权限控制,菜单通过角色控制,可以给用户对应的角色和多角色 2.优化mock数据部分,建立用户常量和角色常量 3.添加tag标签页鼠标滚动功能 4.添加真正的整体换肤功能 5.添加外链 6.添加可视化图,饼图,柱状图等拖拽
vue-antd-admin ist ein auf vue + ant-design-vue entwickeltes Backend-Verwaltungssystem. Es umfasst dynamisches Routing und Berechtigungsmanagement zur Lösung von Benutzerberechtigungsproblemen und bietet grundlegende feste Berechtigungen: Administrator-, Test-, Editor- und benutzerdefinierte Benutzerberechtigungen. die angepasst werden können. Definieren und ändern Sie das Menü entsprechend der Rolle. Sie können mehrere Rollen für den Benutzer definieren. Das Layout bietet zwei Layouts: linkes und rechtes Layout und oberes und unteres Layout, die frei umgeschaltet werden können. in gemischten Themen, hellen Themen und dunklen Themen, die nach Belieben gewechselt werden können, gibt es auch einige häufig verwendete Backend-Funktionen des Verwaltungssystems wie Formulare, Tabellen usw.;
过一段时间后才发现忘记放测试账号和密码了,哈哈哈 1. 用户名:admin 密码 任意6位数 (如果你喜欢,可以用123456) 拥有admin的权限可以查看所有页面 2. 用户名:test 密码 任意6位数 (如果你喜欢,可以用123456) 拥有test的页面权限,可以查看部分页面 3. 用户名:editor 密码 任意6位数 (如果你喜欢,可以用123456) 拥有editor的页面权限,可以查看富文本等页面 4. 使用手机号验证码登录 ,默认拥有admin的权限
Die Basisversion des Node+Express+MySQL-Backends wurde implementiert, Adresse: vue-antd-server
React-Version, Adresse: reacct-antd-admin
Dieses Projekt wird mit vue+vue-cli4+vuex+ant-design-vue und axios entwickelt. Die Daten werden mit mock.js simuliert. Später planen wir, Node zum Schreiben des Backends zu verwenden.
Webpack wurde stark optimiert und der erste Bildschirm wird schneller geladen;
Das System verfügt über integrierte Kartenanzeigen und ArcGIS-Karten, die häufig in E-Charts verwendet werden.
Ich verwende Scherz-Unit-Tests, die aktuelle Abdeckung ist noch relativ gering, ich werde sie schreiben, wenn ich Zeit habe;
Zur Formatierung wird ESlint+prettier verwendet.
- 登录 用户名密码/手机号验证码 - 权限 - 动态路由 - 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
Dieses Projekt bezieht sich auf vue-element-admin und ant-design-pro und hat viele nützliche Schreibmethoden und -methoden gefunden. Wenn Sie Ihr Codierungsniveau wirklich verbessern möchten, wird empfohlen, sich den Code der großen Jungs anzusehen. Open Source ist nicht einfach. Wenn Sie glauben, dass dieses Projekt für Sie nützlich ist, können Sie auf einen Stern klicken. Vorschläge und Fehler sind willkommen.