vue antd admin

vuantdadmin

Explore la documentación de este proyecto »

Vista previa en línea · Informar errores · Hacer sugerencias

Últimas actualizaciones

vue3-basic-admin Completado: vue3-basic-admin es un sistema de gestión de back-end y mid-end listo para usar y de código abierto. Desarrollado en base a tecnologías convencionales como Vue3 , Vite , Element-Plus , TypeScript , Pinia , etc., tiene muchos componentes integrados que se pueden usar de inmediato, lo que puede construir rápidamente un sistema de gestión intermedio y back-end. Actualmente se decide que sea completamente de código abierto. Si este proyecto le resulta útil, puede hacer clic en una estrella y, si tiene cierta capacidad financiera, puede invitar al autor a una taza de café. ! Bienvenido a la vista previa y uso: vue3-basic-admin

1.优化之前版本的权限控制，菜单通过角色控制，可以给用户对应的角色和多角色
2.优化mock数据部分，建立用户常量和角色常量
3.添加tag标签页鼠标滚动功能
4.添加真正的整体换肤功能
5.添加外链
6.添加可视化图，饼图，柱状图等拖拽

Introducción (si tienes buenas ideas, puedes plantear problemas, pero si pierdes la inspiración...)

vue-antd-admin es un sistema de gestión de backend desarrollado en base a vue+ant-design-vue. Incluye enrutamiento dinámico + gestión de permisos para resolver problemas de permisos de usuario y proporciona permisos fijos básicos: administrador, prueba, editor y permisos de usuario personalizados. que se puede personalizar Defina y modifique el menú correspondiente al rol. Puede definir múltiples roles para el usuario. El diseño proporciona dos diseños: diseño izquierdo y derecho y diseño superior e inferior, que se pueden cambiar libremente. en temas mixtos, temas claros y temas oscuros, que se pueden cambiar a voluntad, también hay algunas funciones de backend de uso común del sistema de gestión, como formularios, tablas, etc.;

cuenta de prueba

过一段时间后才发现忘记放测试账号和密码了，哈哈哈


1.  用户名：admin  密码 任意6位数 （如果你喜欢，可以用123456） 拥有admin的权限可以查看所有页面
2.  用户名：test   密码 任意6位数 （如果你喜欢，可以用123456） 拥有test的页面权限，可以查看部分页面
3.  用户名：editor 密码 任意6位数 （如果你喜欢，可以用123456） 拥有editor的页面权限，可以查看富文本等页面
4.  使用手机号验证码登录 ，默认拥有admin的权限

Se ha implementado la versión básica del backend node+express+mysql, dirección: vue-antd-server

versión de reacción, dirección: reacct-antd-admin

Preparación del preámbulo

• Este proyecto se desarrolla usando vue+vue-cli4+vuex+ant-design-vue y axios. Los datos se simulan usando simulacro.js. Más adelante, planeamos usar node para escribir el backend;

• Webpack se ha optimizado enormemente y la primera pantalla se carga más rápido;

• El sistema tiene visualizaciones de gráficos integrados y mapas arcgis comúnmente utilizados en echarts;

• Usé una prueba unitaria de broma, la cobertura actual aún es relativamente baja, la escribiré cuando tenga tiempo;

• Para formatear, se utiliza ESlint+prettier.

Función

- 登录  用户名密码/手机号验证码
- 权限  
- 动态路由
- echarts各种图表
- arcgis地图
- 克里金插值分析图
- 全景图
- 富文本
- Markdown
- 错误页面 403 404 500
- 个人设置
- 系统设置
- 更换主题
- 两种布局方式
- 面包屑
- 标签页
- webSocket 
- svg图标
- 全屏
- 返回顶部
- webpack优化
- 抽奖页
- table表
- form表单
- 上传Excel
- 上传头像和裁剪
- htmlcanvas2截屏
- 封装自定义loading

optimización del paquete web

- 关闭生产环境sourceMap;
- 关闭预加载(vue会预加载后面的页面，会导致首屏加载比较慢)
- g-zip压缩(需要nginx配置);
- 生产环境CDN加载部分插件
- 去除生产环境console和debugger;
- 公共代码抽离
- 打包大小分析
- 打包缓存
- 部分依赖使用异步cdn加载

Instrucciones de uso

- 拥有 admin、test和editor三种权限，每个权限对应的路由和左侧菜单不同；
- 点击个人设置个性化或者右边设置，可以更改页面的设置，如果标签页是否开启，布局方式,主题颜色等；
- 系统管理员拥有所有权限，可以更改用户对应的菜单路由和角色对应的权限。
......

Descripción del directorio de archivos

├── 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的配置

Instalar

# 克隆项目
git clone https://github.com/biubiubiu01/vue-antd-admin.git
# 进入项目目录
cd vue-antd-admin
# 安装依赖
npm install
# 本地开发 启动项目
npm run serve

desplegar

# 打包项目
npm run build
# 单元测试
npm run test:unit

Demostración en línea

Demostración en línea

por fin

Este proyecto hizo referencia a vue-element-admin y ant-design-pro, y encontró muchos métodos y métodos de escritura útiles. Se recomienda que si realmente desea mejorar su nivel de codificación, pueda consultar el código de los grandes. El código abierto no es fácil. Si cree que este proyecto le resulta útil, puede hacer clic en una estrella. Las sugerencias y los errores son bienvenidos.