乐趣区

关于前端:vue3elementPlus-开源后台管理系统模板

jiezi

​

element_vue3.0/VE-Admin

✈ 国内减速链接 ✈ 成果预览

我的项目简介

基于 vue3 和element-plus开发的企业后盾治理模板.

​ ​ ​ ​ ​ ​

性能个性

我的项目应用了最新的 vue3 全家桶+element-plus+mockjs+axios+eChart5. 我的项目继成了mockServe, 可脱离后端自主开发测试 对axios 深度封装, 采纳动静路由, 路由配置更简略,mockServe独立开发测试时可在 nodework 直观查看接口数据
基于 node 实现自动化开发

环境依赖

node 14+, vueCli 4+

部署步骤

npm i npm run serve

目录构造形容

​

应用文档

自定义指令

v-permission=”[array]” 自定义权限指令, 参数为一个数组, 数组元素为按钮所对应的 key 值

<el-button
    v-permission="['add']"
    size="mini"
    type="primary"
    @click="handleEdit(menus.add.name)"
    >{{menus.add.name}}
</el-button>

v-resize=”myChart” 监听 echart 容器的自定义指令, 参数为 echart 实例

<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);

依据需要能够增加更多路由配置或定制化字段, 如路由别名等

接口配置

我的项目中对 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

申明

集体开发保护! 欢送交流学习!

退出移动版