這是壹個基於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做適當的改動