vue3-element-admin 開源後臺管理系統模板

​

vue3-element-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

聲明

我的開發維護! 歡迎交流學習!