vue3-element-admin开源后台管理系统模板
时间：2023-04-05 15:01:13
HTML5
vue3-element-admin?国内加速链接?效果预览?效果预览（备用地址）项目介绍基于vue3和element-plus开发的企业后台管理模板。功能特性项目使用最新的vue3全家桶+element-plus+mockjs+axios+eChart5。项目变成了mockServe，可以从后端独立开发测试，深度封装axios，采用动态路由，路由配置更简单。独立开发测试mockServe时，直接在nodework中查看接口数据基于node的自动化开发环境依赖node14+，vueCli4+部署步骤npminpmrunserve目录结构说明使用文档自定义命令v-permission="[array]"自定义权限命令，参数为数组，数组元素为按钮对应的key值{{menus.add.name}}v-resize="myChart"监控echart容器的自定义指令，参数就是echart实例
动态路由的配置可以查看。srcpluginspermission.js的主要原理是根据后台接口返回的树形菜单数据动态生成并挂载路由表。具体需求字段可以在srcpluginspermission.js中的fnAddDynamicMenuRoutes方法中修改配置letroute={path:menuList[i].url.replace(///g,"-")+`-${menuList[i].id}`，组件：null，名称：menuList[i].url.replace(///g,"-")+`-${menuList[i].id}`//meta:{//}};//url以http[s]://开头，通过iframe显示if(menuList[i].iframe==1){route["path"]=`i-${menuList[i].id}`;route["name"]=`i-${menuList[i].id}`;route["props"]={url:menuList[i].url};route["component"]=()=>import("@/views/IFrame.vue");}else{constl="views/layoutpages/"+menuList[i].url;route["component"]=()=>import("@/"+l+".vue");}routes.push(route);可以根据需求添加更多的路由配置或者自定义字段，比如routingalias等接口配置项目中，axios被打包配置。添加Global字段，控制是否显示全屏加载。默认为真。如果需要修改和添加axios配置，可以在srcpluginsaxios.js中添加接口。本项目做了深度的mock集成，在使用其他项目时，往往不方便单独维护mock接口和项目接口。所以他们放在一起。只需将它添加到一个地方。接口目录是srcapimodules。不要修改目录名称。在这个目录下添加对应的接口文件.module.exports={login:{//接口名称必须是url:"/login",//接口地址必须是type:"post",//请求typemustbemock:true,//Mock细粒度控制开关，不需要，不填则为falseresponse:opt=>{//mock开启时返回数据opt为请求数据头const{body:{userName,pwd}}=opt;letdata={code:"00",message:"登录成功！",token:newDate().getTime(),uname:userName};if(userName=="Administrator"){if(pwd!="123456"){data={code:"01",message:"密码错误"};}}返回数据；}}}必须使用模块。封装后axios实例挂载在自定义字段window.VE_API上。调用方法为：VE_API[fileName][portName](params,[config])//有全局加载VE_API[fileName][portName](params,{Global:false)//没有全局加载菜单时，配置项目中的菜单是根据后台返回的树结构数据动态生成的。个人开发维护请参考srccomponentslayoutcomponentsSlideMenu.vue声明！欢迎交流学习！
