✈ 国内加速连接
✈ 效果预览
✈ 效果预览(备用地址)html
基于vue3和element-plus开发的企业后台管理模板.vue
项目使用了最新的vue3全家桶+element-plus+mockjs+axios+eChart5.项目继成了mockServe,可脱离后端自主开发测试 对axios深度封装,采用动态路由,路由配置更简单,mockServe独立开发测试时可在nodework直观查看接口数据
基于node实现自动化开发node
node 14+, vueCli 4+ios
npm i npm run servegit
v-permission="[array]" 自定义权限指令,参数为一个数组,数组元素为按钮所对应的key值npm
<el-button v-permission="['add']" size="mini" type="primary" @click="handleEdit(menus.add.name)" >{{ menus.add.name }} </el-button>
v-resize="myChart" 监听 echart 容器的自定义指令,参数为 echart 实例axios
<div v-resize="myChart" style="height:400px;margin-top:20px" ref="liveChart" ></div>
动态路由的配置可查看 srcpluginspermission.js
主要原理就是根据后端接口返回的树形菜单数据,动态生成路由表并挂载.具体需求字段可在srcpluginspermission.js中的fnAddDynamicMenuRoutes方法中进行配置修改后端
let route = { path:menuList[i].url.replace(///g, "-") + `-${menuList[i].id}`, component: null, name: 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 { const l = "views/layoutpages/" + menuList[i].url; route["component"] = () => import("@/" + l + ".vue"); } routes.push(route);
根据需求能够添加更多路由配置或定制化字段,如路由别名等api
项目中对axios作了封装配置中添加Global字段用来控制是否显示全屏load,默认为true,如需修改添加axios配置可在srcpluginsaxios.js中进行数组
添加接口
本项目对mock作了深度集成,在使用其余项目时,mock接口和项目接口每每都是分开维护很不方便.因此就放在了一块儿.只用在一处添加便可.接口目录为srcapimodules不要修改此目录名称.在该目录下添加对应的接口文件.
module.exports = { login: { //接口名称 必须 url: "/login", //接口地址 必须 type: "post", //请求类型 必须 mock: true, //mock细粒度控制开关,非必须,不填则为false response: opt => { //启用mock时的返回数据 opt为请求数据头 const { body: { userName, pwd } } = opt; let data = { code: "00", message: "登陆成功!", token: new Date().getTime(), uname: userName }; if (userName == "Administrator") { if (pwd != "123456") { data = { code: "01", message: "密码错误" }; } } return data; } } }
必须使用module.exports导出
接口的使用
项目中已将封装后axios实例挂载到自定义字段window.VE_API上.调用方式为:
VE_API [ fileName ][ portName ] (params,[config]) //有全局loading VE_API [ fileName ][ portName ] (params,{Global:false) //没有全局loading
项目中的菜单时根据后端返回的树形结构数据动态生成,具体可查看srccomponentslayoutcomponentsSlideMenu.vue
我的开发维护! 欢迎交流学习!