vue3-element-admin
走過路過的老鐵,幫忙點個小 ?????,??????????,??????????
項目簡介
基于vue3和element-plus開發的企業后臺管理模板.
功能特性
項目使用了最新的vue3 全家桶+element-plus+mockjs+axios+eChart5.項目繼成了mockServe,可脫離后端自主開發測試 對axios深度封裝,采用動態路由,路由配置更簡單,mockServe獨立開發測試時可在 nodework 直觀查看接口數據
基于 node 實現自動化開發
環境依賴
node 14+,vueCli 4+
部署步驟
npm inpm run serve
目錄結構描述
使用文檔
自定義指令
v-permission="[array]"自定義權限指令,參數為一個數組,數組元素為按鈕所對應的 key 值
v-permission="['add']"
size="mini"
type="primary"
@click="handleEdit(menus.add.name)"
>{{ menus.add.name }}
v-resize="myChart"監聽 echart 容器的自定義指令,參數為 echart 實例
v-resize="myChart"
style="height:400px;margin-top:20px"
ref="liveChart"
>
動態路由
動態路由的配置可查看src\plugins\permission.js
主要原理就是根據后端接口返回的樹形菜單數據,動態生成路由表并掛載.具體需求字段可在src\plugins\permission.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 配置可在src\plugins\axios.js中進行
添加接口
本項目對 mock 做了深度集成,在使用其他項目時,mock 接口和項目接口往往都是分開維護很不方便.所以就放在了一起.只用在一處添加即可.接口目錄為src\api\modules不要修改此目錄名稱.在該目錄下添加對應的接口文件.
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
菜單配置
項目中的菜單時根據后端返回的樹形結構數據動態生成,具體可查看src\components\layout\components\SlideMenu.vue
聲明
個人開發維護! 歡迎交流學習!
