vue3-element-admin
走過(guò)路過(guò)的老鐵,幫忙點(diǎn)個(gè)小 ?????,??????????,??????????
項(xiàng)目簡(jiǎn)介
基于vue3和element-plus開(kāi)發(fā)的企業(yè)后臺(tái)管理模板.
功能特性
項(xiàng)目使用了最新的vue3 全家桶+element-plus+mockjs+axios+eChart5.項(xiàng)目繼成了mockServe,可脫離后端自主開(kāi)發(fā)測(cè)試 對(duì)axios深度封裝,采用動(dòng)態(tài)路由,路由配置更簡(jiǎn)單,mockServe獨(dú)立開(kāi)發(fā)測(cè)試時(shí)可在 nodework 直觀查看接口數(shù)據(jù)
基于 node 實(shí)現(xiàn)自動(dòng)化開(kāi)發(fā)
環(huán)境依賴
node 14+,vueCli 4+
部署步驟
npm inpm run serve
目錄結(jié)構(gòu)描述
使用文檔
自定義指令
v-permission="[array]"自定義權(quán)限指令,參數(shù)為一個(gè)數(shù)組,數(shù)組元素為按鈕所對(duì)應(yīng)的 key 值
v-permission="['add']"
size="mini"
type="primary"
@click="handleEdit(menus.add.name)"
>{{ menus.add.name }}
v-resize="myChart"監(jiān)聽(tīng) echart 容器的自定義指令,參數(shù)為 echart 實(shí)例
v-resize="myChart"
style="height:400px;margin-top:20px"
ref="liveChart"
>
動(dòng)態(tài)路由
動(dòng)態(tài)路由的配置可查看src\plugins\permission.js
主要原理就是根據(jù)后端接口返回的樹(shù)形菜單數(shù)據(jù),動(dòng)態(tài)生成路由表并掛載.具體需求字段可在src\plugins\permission.js中的fnAddDynamicMenuRoutes方法中進(jìn)行配置修改
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]://開(kāi)頭, 通過(guò)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);
根據(jù)需求可以添加更多路由配置或定制化字段,如路由別名等
接口配置
項(xiàng)目中對(duì) axios 做了封裝配置中添加Global字段用來(lái)控制是否顯示全屏 load,默認(rèn)為 true,如需修改添加 axios 配置可在src\plugins\axios.js中進(jìn)行
添加接口
本項(xiàng)目對(duì) mock 做了深度集成,在使用其他項(xiàng)目時(shí),mock 接口和項(xiàng)目接口往往都是分開(kāi)維護(hù)很不方便.所以就放在了一起.只用在一處添加即可.接口目錄為src\api\modules不要修改此目錄名稱.在該目錄下添加對(duì)應(yīng)的接口文件.
module.exports = {
login: {
//接口名稱? 必須
url: "/login", //接口地址? 必須
type: "post", //請(qǐng)求類型? 必須
mock: true, //mock細(xì)粒度控制開(kāi)關(guān),非必須,不填則為false
response: opt => {
//啟用mock時(shí)的返回?cái)?shù)據(jù)? opt為請(qǐng)求數(shù)據(jù)頭
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: "密碼錯(cuò)誤"
};
}
}
return data;
}
}
};
必須使用module.exports導(dǎo)出
接口的使用
項(xiàng)目中已將封裝后 axios 實(shí)例掛載到自定義字段 window.VE_API 上.調(diào)用方式為:
VE_API [ fileName ][ portName ] (params,[config])? //有全局loading
VE_API [ fileName ][ portName ] (params,{Global:false)? //沒(méi)有全局loading
菜單配置
項(xiàng)目中的菜單時(shí)根據(jù)后端返回的樹(shù)形結(jié)構(gòu)數(shù)據(jù)動(dòng)態(tài)生成,具體可查看src\components\layout\components\SlideMenu.vue
聲明
個(gè)人開(kāi)發(fā)維護(hù)! 歡迎交流學(xué)習(xí)!
