這是壹個基於VUECLI+Element-Plus * *的開源vue3動態路由和動態菜單開源框架。總的來說,這個項目非常好。使用它可以直接實現動態路由和菜單管理功能,實現快速開發。支持兩級菜單管理和嵌套路由管理。
“元素加”:“^1.0.2-beta.70”,
“vue”:“^3.0.0”,
“vue路由器”:“^4.0.0-0”
1,UNIUICLI 3是基於vue3的項目,與時俱進,很有時代感,緊跟vue3的腳步。
2.項目只集成了兩個必要的JavaScript庫,element-plus和vue-router,沒有集成其他的JavaScript庫。這意味著妳可以根據自己的項目需求安裝自己需要的JavaScript庫,避免項目集成庫太多帶來的麻煩。
3.強大的組件管理器。為了幫助您可視化地管理動態路線和菜單,我們內置了“組件管理”功能組件,使路線和菜單管理可視化。同時,為了更好的實現項目管理,我們在vue2版本的基礎上增加了可選的json導出功能,讓妳可以快速生成json數據,生成用戶權限路由和菜單。
4.美景框架。我們有壹個內置的後臺管理UI框架,通過它您可以快速生成和構建管理項目。當然,妳也可以構建自己喜歡的UI框架結構。
5.幹擾少。為了讓項目更純粹,給開發者更多的控制權,我們在src文件夾下新建了壹個unitui文件夾來存放我們的內置部分。為了便於啟動和理解您的項目,您可以直接清空ivews和components文件夾中的內容並重新構建您的組件,因為這些目錄中的文件並不重要。
Unituicli3之所以強大,是因為組件管理,因為它是核心組件,使得動態路由(添加、刪除、修改)、嵌套路由和菜單管理(添加、刪除、修改)可視化,支持json數據生成,使得前後臺交互成為可能。只需要將生成的json存儲在數據庫中,就可以實現權限編輯。
雖然我們盡量減少對開發者的影響,但是做壹些改變是不可避免的。
從“vue”導入{ createApp }
從“element-plus”導入ElementPlus
從'導入應用程序。/App.vue '
從'導入路由器。/路由器'
import ' @/unitui/init _ route . js '//這是為了防止刷新路由丟失。
const app = createApp(App)
app.use(ElementPlus)
app.use(路由器)。掛載(#app)
//註冊全局組件
從'導入Uicon。/unitui/sub/Uicon.vue '
app.component('Uicon ',Uicon)
如果妳不用elementPlus作為妳的UI,可以參考上面的,做適當的改動。
這是壹個全局註冊的圖標選擇器。您可以在任何組件中使用圖標選擇器,該組件安裝在main.js文件中。如果不使用element,就需要進行修改,否則可能會影響圖標選擇的功能。
真實效果
這是壹個非常重要的內置組件,主要用來模擬登錄時的操作和信息生成。它讀取位於assets/json/文件夾中的兩個json生成菜單和路由信息,json內容模擬後端返回的內容。
其中最重要的是路線的生成。登錄並路由json信息返回後,調用init_route方法。代碼如下:
init_route(route_data) {
//根據後端返回的json數據生成路由。
const init _ route _ data =[];//定義壹個路由數組來存儲生成的路由信息。
for(設索引= 0;index & lt路由_數據.長度;index++) {
//循環後端返回的json
//循環
if (route_data[index].孩子!=未定義){
//有子節點時生成路由數組的方法
init_route_data[index] = {
路徑:route_data[index]。路徑,//路由url。
名稱:route_data[index]。name,//路由名稱。
component:()= & gt;import(`@/${route_data[index])。組件} `),
//component:(resolve)= & gt;require([`@/views/$ { route _ data[index])。component }`],resolve),//加載後端json描述的vue文件。
元:{
//路由壹些附加信息
show _ site:route _ data[索引]。meta。show _ site,//是否全屏顯示?
web _ title:route _ data[索引]。meta . web _ title//網站標題
},
子級:[] //嵌套路由
};
for(設I = 0;我& ltroute _ data[index]. children . length;i++) {
init _ route _ data[索引]。兒童[i] = {
路徑:route _ data [index]。孩子[我]。路徑,//路由url。
名稱:route _ data [index]。孩子[我]。name,//路由名稱。
component:()= & gt;import(`@/${route_data[index])。孩子[我]。組件} `),
//component:(resolve)= & gt;require([`@/views/$ { route _ data[index])。孩子[我]。component }`],resolve),//加載後端json描述的vue文件。
元:{
//路由壹些附加信息
show _ site:route _ data[索引]。孩子[我]。meta。show _ site,//是否全屏顯示?
web _ title:route _ data[索引]。孩子[我]。meta . web _ title//網站標題。
}
};
}
}否則{
//生成無子路由數組的方法
init_route_data[index] = {
路徑:route_data[index]。路徑,//路由url。
名稱:route_data[index]。name,//路由名稱。
component:()= & gt;import(`@/${route_data[index])。組件} `),
//component:(resolve)= & gt;require([`@/views/$ { route _ data[index])。component }`],resolve),//加載後端json描述的vue文件。
元:{
show _ site:route _ data[索引]。meta。show _ site,//是否全屏顯示?
web _ title:route _ data[索引]。meta . web _ title//網站標題
}
};
//console . log(index);
}
}
//console . log(init _ route _ data);//打印生成初始化路由數組。
for(設索引= 0;index & lt路由_數據.長度;index++) {
//因為addRoutes已經被放棄,所以需要重新使用AddRoutes進行數組添加。
這個。$ router . add route(init _ route _ data[index]);//循環添加數組
}
this . init _ menu();//執行菜單生成方法
},
其他三個可以隨意修改。
在vue2的動態路由項目中,調用app.vue文件的mounted方法中的路由生成方法,可以刷新路由,防止路由丟失。但是在vue3中同樣的方式會出現異常,因為我們在添加路由之前跳轉,所以刷新後的頁面上不會有內容,所以我們在unitui文件夾中新建壹個init_route.js,在login.vue文件中寫壹些類似路由初始化的東西,然後在main.js中
Init_route.js內容
從' @/router '導入路由器
函數init_route() {
//根據後端返回的json數據生成路由。
if(session storage . getitem(" route _ data ")!= null) {
const route _ data = JSON . parse(session storage . getitem(" route _ data "));
//console . log(route _ data);
const init _ route _ data =[];//定義壹個路由數組來存儲生成的路由信息。
for(設索引= 0;index & lt路由_數據.長度;index++) {
//循環後端返回的json
//循環
if (route_data[index].孩子!=未定義){
//有子節點時生成路由數組的方法
init_route_data[index] = {
路徑:route_data[index]。路徑,//路由url。
名稱:route_data[index]。name,//路由名稱。
component:()= & gt;import(`@/${route_data[index])。組件} `),
//component:(resolve)= & gt;require([`@/views/$ { route _ data[index])。component }`],resolve),//加載後端json描述的vue文件。
元:{
//路由壹些附加信息
show _ site:route _ data[索引]。meta。show _ site,//是否全屏顯示?
web _ title:route _ data[索引]。meta . web _ title//網站標題
},
子級:[] //嵌套路由
};
for(設I = 0;我& ltroute _ data[index]. children . length;i++) {
init _ route _ data[索引]。兒童[i] = {
路徑:route _ data [index]。孩子[我]。路徑,//路由url。
名稱:route _ data [index]。孩子[我]。name,//路由名稱。
component:()= & gt;
import(`@/${route_data[index])。孩子[我]。組件} `),
//component:(resolve)= & gt;require([`@/views/$ { route _ data[index])。孩子[我]。component }`],resolve),//加載後端json描述的vue文件。
元:{
//路由壹些附加信息
show _ site:route _ data[索引]。孩子[我]。meta。show _ site,//是否全屏顯示?
web _ title:route _ data[索引]。孩子[我]。meta . web _ title//網站標題。
}
};
}
}否則{
//生成無子路由數組的方法
init_route_data[index] = {
路徑:route_data[index]。路徑,//路由url。
名稱:route_data[index]。name,//路由名稱。
component:()= & gt;import(`@/${route_data[index])。組件} `),
//component:(resolve)= & gt;require([`@/views/$ { route _ data[index])。component }`],resolve),//加載後端json描述的vue文件。
元:{
show _ site:route _ data[索引]。meta。show _ site,//是否全屏顯示?
web _ title:route _ data[索引]。meta . web _ title//網站標題
}
};
//console . log(index);
}
}
//console . log(init _ route _ data);//打印生成初始化路由數組。
for(設索引= 0;index & lt路由_數據.長度;index++) {
//因為addRoutes已經被放棄,所以需要重新使用AddRoutes進行數組添加。
router . add route(init _ route _ data[index]);//循環添加數組
}
//將刷新放在這裏
//console . log(' app ');
//const index = window . location . href . lastindexof(" # ")
//const URL = window . location . href . substring(index+1,window . location . href . length);
//這個。$router.push(url)
}
}
init_route()
main.js中的引用:
import ' @/unitui/init _ route . js '//這是為了防止刷新路由丟失。
至此,刷新自動初始化即可完成。
我們通過獲取meta的值來控制顯示位置。在app.vue文件中的route中顯示_site(全屏顯示0,視圖顯示1),然後用v-if控制不同router-view的顯示。
App.vue源代碼:
1.如果不喜歡我們的ui框架,需要開發新的ui,沒有ui框架的支持,組件管理的功能可能無法正常顯示(空白顯示)。您可以將文件unitui/ subadmin/ SubAdmin.vue中的樣式部分更改為:
#sub_admin_back {
寬度:100%;
/*非ui框架把高度寫成height:100 VH;*/
身高:100 VH;
背景-尺寸:封面;
位置:相對;
背景色:# ffffff
邊框-半徑:10px;
}
1,對框架的幹擾還沒有盡可能的減少,還是需要對main.js做適當的改動