Explore a documentação deste projeto »
Visualizar on-line · Relatar bugs · Fazer sugestões
vue3-basic-admin Concluído: vue3-basic-admin
é um sistema de gerenciamento de mid e back-end pronto para uso de código aberto. Desenvolvido com base em tecnologias convencionais, como Vue3
, Vite
, Element-Plus
, TypeScript
, Pinia
, etc., possui muitos componentes integrados que podem ser usados imediatamente, o que pode construir rapidamente um sistema de gerenciamento intermediário e back-end . Atualmente, foi decidido ser totalmente de código aberto. Se este projeto for útil para você, você pode clicar em uma estrela e, se tiver uma certa capacidade financeira, pode presentear o autor com uma xícara de café. ! Bem-vindo à visualização e uso: vue3-basic-admin
1.优化之前版本的权限控制,菜单通过角色控制,可以给用户对应的角色和多角色 2.优化mock数据部分,建立用户常量和角色常量 3.添加tag标签页鼠标滚动功能 4.添加真正的整体换肤功能 5.添加外链 6.添加可视化图,饼图,柱状图等拖拽
vue-antd-admin é um sistema de gerenciamento de back-end desenvolvido com base em vue + ant-design-vue. Inclui roteamento dinâmico + gerenciamento de permissões para resolver problemas de permissão do usuário e fornece permissões fixas básicas: administrador, teste, editor e permissões de usuário personalizadas, que pode ser personalizado Definir e modificar o menu correspondente à função Você pode definir várias funções para o usuário O layout fornece dois layouts: layout esquerdo e direito e layout superior e inferior, que podem ser alternados livremente. em temas mistos, temas claros e temas escuros, que podem ser alternados à vontade, existem também alguns backends Funções comumente usadas do sistema de gerenciamento, como formulários, tabelas, etc.;
过一段时间后才发现忘记放测试账号和密码了,哈哈哈 1. 用户名:admin 密码 任意6位数 (如果你喜欢,可以用123456) 拥有admin的权限可以查看所有页面 2. 用户名:test 密码 任意6位数 (如果你喜欢,可以用123456) 拥有test的页面权限,可以查看部分页面 3. 用户名:editor 密码 任意6位数 (如果你喜欢,可以用123456) 拥有editor的页面权限,可以查看富文本等页面 4. 使用手机号验证码登录 ,默认拥有admin的权限
A versão básica do backend node+express+mysql foi implementada, endereço: vue-antd-server
versão react, endereço: reactct-antd-admin
Este projeto é desenvolvido usando vue+vue-cli4+vuex+ant-design-vue e axios. Os dados são simulados usando mock.js. Posteriormente, planejamos usar o node para escrever o backend;
O Webpack foi bastante otimizado e a primeira tela carrega mais rápido;
O sistema possui exibições de gráficos integradas e mapas Arcgis comumente usados em echarts;
Teste de unidade de brincadeira usado, a cobertura atual ainda é relativamente baixa, escreverei quando tiver tempo;
Para formatação, ESlint+prettier é usado.
- 登录 用户名密码/手机号验证码 - 权限 - 动态路由 - 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
Demonstração on-line
Este projeto referiu-se a vue-element-admin e ant-design-pro e encontrou muitos métodos e métodos de escrita úteis. Recomenda-se que, se você realmente deseja melhorar seu nível de codificação, dê uma olhada no código dos grandes. Código aberto não é fácil. Se você acha que este projeto é útil para você, clique em uma estrela. Sugestões e bugs são bem-vindos.