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])   //有全局loadingVE_API [ fileName ][ portName ] (params,{Global:false)   //没有全局loading

菜单配置

我的项目中的菜单时依据后端返回的树形构造数据动静生成,具体可查看srccomponentslayoutcomponentsSlideMenu.vue

申明

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