内容较多请耐心阅读，你认真读完一定获益匪浅
安装
- 下载访问https://gitee.com/unitui/unituicli3.git获取源码。
- 在项目目录执行“npm install”
- 通过“npm run serve”运行项目
前言
这是一个基于vuecli+element-plus共同搭建的一个开源vue3动态路由和动态菜单开源框架，总体来说这个项目是非常优秀。你通过使用它直接实现动态路由和菜单管理功能，实现快速开发。支持二级菜单管理和嵌套路由管理。
介绍
集成JavaScript库情况
"element-plus": "^1.0.2-beta.70",
"vue": "^3.0.0",
"vue-router": "^4.0.0-0"
优点
1、unituicli3是一个基于vue3搭建的一个项目，它是与时俱进的，极具时代性，紧跟vue3的脚步。
2、项目仅仅集成了element-plus和vue-router两个必备的JavaScript库，除此之外没有再集成任何JavaScript库。这也就意味着你可以根据自己的项目需要去安装自己需要的JavaScript库，避免因为项目集成库过多给你带来烦恼。
3、强劲的组件管理器，我们为了帮助你实现可视化管理动态路由和菜单，我们内置了《组件管理》功能组件，使路由和菜单管理可视化。同时我们为了更好地实现项目管理，在vue2版本的基础上新增了可选json导出功能，让你可以快速实现json数据生成，生成用户权限路由和菜单。
4、美丽的视图框架，我们内置了一个后台管理UI框架，你可以通过使用它实现admin项目的快速生成和搭建。当然你也可以自己搭建自己喜欢的UI框架结构。
5、更少的干扰。为了让项目更加纯净，将项目控制权更多的交给开发者，我们新建了unitui文件夹位于src文件夹下用于存放我们内置的部分，为了便于你项目的启动和理解你可以直接将ivews和components文件夹内容清空，重新搭建你的组件，因为这些目录下的文件这些并不重要。
优势
名称 功能 | 介绍 | 功能 |
动态路由 | 用于可视化将vue文件加载到路由中，实现访问 | 挂载vue、删除、选择生成json，嵌套路由管理 |
动态菜单 | 将菜单与动态路由相配合，实现菜单点击访问路由 | 菜单增、删、改，二级菜单管理 |
组件管理器
Unituicli3因为《组件管理》而显得强大，因为这是核心组件，将动态路由（添加、删除、修改）、嵌套路由和菜单管理（添加、删除、修改）变得可视化，而且支持json数据生成使前后端间交互变得可能，你只需要将生成的json储存在数据库便可实现权限编辑。
开发注意
我们虽然尽力减少对开发者的影响，但是做出一些修改是不可避免的。
- main.js的修改
import { createApp } from 'vue'
import ElementPlus from 'element-plus';
import App from './App.vue'
import router from './router'
import '@/unitui/init_route.js'//这是为了实现防止刷新路由丢失
const app = createApp(App)
app.use(ElementPlus)
app.use(router).mount('#app')
// 注册全局组件
import Uicon from './unitui/sub/Uicon.vue'
app.component('Uicon',Uicon)
你如果不是使用elementPlus作为你的UI你可以参考上面内容做出适当修改
图标选择全局组件
这是一个全局注册的图标选择器，你可以在任意组件通过<Uicon v-model=”icon”></Uicon>使用图标选择器，它挂载在main.js文件中，你如不是使用element你需要做出修改，否则可能影响图标选择的功能使用。
实际效果
内置页面
登录
这是一个非常重要的内置组件，它主要用于模拟登录时的操作和信息生成，它会读取位于assets/json/文件夹下的两个json生成菜单和路由信息，json内容模拟后端返回的内容。
其中最重要的是路由的生成，你在登录后路由json信息返回后调用init_route方法，代码如下：
init_route(route_data) {
//依据后端返回的json数据生成路由
const init_route_data = []; //定义一个路由数组储存生成的路由信息
for (let index = 0; index < route_data.length; index++) {
//循环后端返回的json
//循环
if (route_data[index].children != undefined) {
//有children时生成路由数组方法
init_route_data[index] = {
path: route_data[index].path, //路由url
name: route_data[index].name, //路由名
component: () => import(`@/${route_data[index].component}`),
// component: (resolve) => require([`@/views/${route_data[index].component}`], resolve), //加载后端json描述的vue文件
meta: {
//路由一些附加信息
show_site: route_data[index].meta.show_site, //是否全屏显示
web_title: route_data[index].meta.web_title //网站标题
},
children: [] //嵌套路由
};
for (let i = 0; i < route_data[index].children.length; i++) {
init_route_data[index].children[i] = {
path: route_data[index].children[i].path, //路由url
name: route_data[index].children[i].name, //路由名
component: () => import(`@/${route_data[index].children[i].component}`),
// component:(resolve) => require([`@/views/${route_data[index].children[i].component}`], resolve), //加载后端json描述的vue文件
meta: {
//路由一些附加信息
show_site: route_data[index].children[i].meta.show_site, //是否全屏显示
web_title: route_data[index].children[i].meta.web_title //网站标题
}
};
}
} else {
//没有children时生成路由数组方法
init_route_data[index] = {
path: route_data[index].path, //路由url
name: route_data[index].name, //路由名
component: () => import(`@/${route_data[index].component}`),
// component:(resolve) => require([`@/views/${route_data[index].component}`], resolve), //加载后端json描述的vue文件
meta: {
show_site: route_data[index].meta.show_site, //是否全屏显示
web_title: route_data[index].meta.web_title //网站标题
}
};
// console.log(index);
}
}
// console.log(init_route_data); //打印生成初始化路由数组
for (let index = 0; index < route_data.length; index++) {
//由于addRoutes已经废弃，所以需要循环使用addRoute进行数组添加
this.$router.addRoute(init_route_data[index]); //循环添加数组
}
this.init_menu(); //执行菜单生成方法
},
注册
找回密码
404错误
其他三个你可以随意修改
动态路由防止刷新丢失
在vue2动态路由项目之中，在app.vue文件mounted方法中调用路由生成方法，可以实现刷新路由防丢失，但是在vue3中采用同样方式，则会出现异常，原因是我们跳转发生在路由添加前，所以会出现刷新后页面没有内容，所以我们在unitui文件夹下新建init_route.js写下和login.vue文件中路由初始化相似的内容，然后再main.js中引入。
init_route.js内容：
import router from '@/router'
function init_route() {
//依据后端返回的json数据生成路由
if (sessionStorage.getItem("route_data") != null) {
const route_data = JSON.parse(sessionStorage.getItem("route_data"));
// console.log(route_data);
const init_route_data = []; //定义一个路由数组储存生成的路由信息
for (let index = 0; index < route_data.length; index++) {
//循环后端返回的json
//循环
if (route_data[index].children != undefined) {
//有children时生成路由数组方法
init_route_data[index] = {
path: route_data[index].path, //路由url
name: route_data[index].name, //路由名
component: () => import(`@/${route_data[index].component}`),
// component: (resolve) => require([`@/views/${route_data[index].component}`], resolve), //加载后端json描述的vue文件
meta: {
//路由一些附加信息
show_site: route_data[index].meta.show_site, //是否全屏显示
web_title: route_data[index].meta.web_title //网站标题
},
children: [] //嵌套路由
};
for (let i = 0; i < route_data[index].children.length; i++) {
init_route_data[index].children[i] = {
path: route_data[index].children[i].path, //路由url
name: route_data[index].children[i].name, //路由名
component: () =>
import(`@/${route_data[index].children[i].component}`),
// component:(resolve) => require([`@/views/${route_data[index].children[i].component}`], resolve), //加载后端json描述的vue文件
meta: {
//路由一些附加信息
show_site: route_data[index].children[i].meta.show_site, //是否全屏显示
web_title: route_data[index].children[i].meta.web_title //网站标题
}
};
}
} else {
//没有children时生成路由数组方法
init_route_data[index] = {
path: route_data[index].path, //路由url
name: route_data[index].name, //路由名
component: () => import(`@/${route_data[index].component}`),
// component:(resolve) => require([`@/views/${route_data[index].component}`], resolve), //加载后端json描述的vue文件
meta: {
show_site: route_data[index].meta.show_site, //是否全屏显示
web_title: route_data[index].meta.web_title //网站标题
}
};
// console.log(index);
}
}
// console.log(init_route_data); //打印生成初始化路由数组
for (let index = 0; index < route_data.length; index++) {
//由于addRoutes已经废弃，所以需要循环使用addRoute进行数组添加
router.addRoute(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);
// this.$router.push(url)
}
}
init_route()
在main.js中引用：
import '@/unitui/init_route.js'//这是为了实现防止刷新路由丢失
此时便可完成刷新自动初始化
是否显示在框架内控制实现原理
我们通过在app.vue文件中通过获取路由中meta. show_site的值（0全屏显示，1显示在视图内），然后使用 v-if控制不同router-view的显示来实现显示位置的控制。
App.vue源码：
<template>
<div>
<router-view v-if="!$route.meta.show_site" />
<el-container v-if="$route.meta.show_site">
<div @mouseenter="change_aside_menu('enter')" @mouseleave="change_aside_menu('leave')">
<el-aside :width="isCollapse?'65px':'200px'">
<Aside :Collapse="isCollapse"></Aside>
</el-aside>
</div>
<el-container>
<el-header>
<Header></Header>
</el-header>
<el-main>
<router-view></router-view>
</el-main>
<el-footer>
<Footer></Footer>
</el-footer>
</el-container>
</el-container>
</div>
</template>
开发注意
1、如果你不喜欢我们的ui框架，你需要开发新的ui时，没有ui框架的支持《组件管理》功能可能不能正常显示（显示空白），你可以将unitui/ subadmin/ SubAdmin.vue文件中style部分改为：
#sub_admin_back {
width: 100%;
/* 非ui框架将height写为height: 100vh; */
height: 100vh;
background-size: cover;
position: relative;
background-color: #ffffff;
border-radius: 10px;
}
目前不足
1、没能尽可能减少对框架的干扰，你仍然需要保持对main.js的适当修改。
结语
你喜欢可以关注我、获取最新ui信息
