# unituicli3

**Repository Path**: winken/unituicli3

## Basic Information

- **Project Name**: unituicli3
- **Description**: 一个基于vuecli+element-plus共同搭建的一个开源动态路由和动态菜单开源管理框架
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 20
- **Created**: 2021-08-16
- **Last Updated**: 2021-08-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# unituicli3
![登录页面](https://images.gitee.com/uploads/images/2021/0814/170847_6de94d17_9544988.png "屏幕截图.png")
#### 介绍
一个基于vuecli+element-plus共同搭建的一个开源动态路由和动态菜单开源管理框架，总体来说这个项目是非常优秀的。
1、unituicli3是一个基于vue3搭建的一个项目，它是非常与时俱进的，极具时代性。
2、项目仅仅集成了element-plus和vue-router两个必备的JavaScript库，除此之外没有再集成任何js库。这也就意味着你可以根据自己的项目需要去安装自己喜欢的JavaScript库以免因为项目集成项目过多给你带来烦恼。

```
"dependencies": {
    "core-js": "^3.6.5",
    "element-plus": "^1.0.2-beta.70",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-0"
  },
```

3、强劲的组件管理器，我们为了使你更好地动态管理路由和菜单，我们内置了路由和菜单管理器使路由和菜单管理异常简单。
![组件管理](https://images.gitee.com/uploads/images/2021/0814/171004_a425a4a2_9544988.png "屏幕截图.png")
![路由管理](https://images.gitee.com/uploads/images/2021/0814/171025_e5c6a36a_9544988.png "屏幕截图.png")
![菜单管理](https://images.gitee.com/uploads/images/2021/0814/171050_af91972c_9544988.png "屏幕截图.png")
同时我们为了更好地实现项目管理，在vue2版本的基础上新增了可选json导出，让你可以快速实现json数据生成，快速生成用户权限。
4、美丽的视图框架，我们内置了一个视图框架，你可以通过使用它实现admin项目的快速生成和搭建。当然你也可以自己搭建自己喜欢的ui框架。
5、更少的干扰。为了让项目更加纯净我们新建了unitui目录位于src文件夹下，为了便于你项目的启动和理解你可以直接将ivews和components文件夹内容清空，这些并不重要。
#### 项目目录
1. assets//一些静态文件，其中有两个json文件用于模拟后端返回的路由和菜单json，需要后端交互，请返回类似json内容
2. components//可清空
3. router//路由信息
4. unitui//重要文件
5. views//可清空

#### 安装教程
`//以下内容成功执行的前提是，你已具备[node](https://nodejs.org/zh-cn/)+[vuecli](https://cli.vuejs.org/zh/guide/)环境`
`1、可以通过clone或下载压缩包获取项目文件`
`2、在项目目录执行 npm install`

#### 使用说明
1、router默认加载一些静态路由
```javascript
import {
  createRouter,
  createWebHashHistory
} from 'vue-router'

const routes = [{
    path: '/',
    name: 'Home',
    redirect: '/login'
  },
  {
    path: '/login', //路由url
    name: 'login', //路由名称
    component: () => import('@/unitui/pages/Login.vue'), //加载模板文件
    meta: {
      show_site: 0, //是否全屏显示0为全屏显示，1为显示在框架内
      web_title: "登录" //网站标题
    }
  },
  {
    path: '/register', //路由url
    name: 'register', //路由名称
    component: () => import('@/unitui/pages/Register.vue'), //加载模板文件
    meta: {
      show_site: 0, //是否全屏显示0为全屏显示，1为显示在框架内
      web_title: "登录" //网站标题
    }
  },
  {
    path: '/forget', //路由url
    name: 'forget', //路由名称
    component: () => import('@/unitui/pages/Forget.vue'), //加载模板文件
    meta: {
      show_site: 0, //是否全屏显示0为全屏显示，1为显示在框架内
      web_title: "登录" //网站标题
    }
  },
  {
    path: '/404', //路由url
    name: '404', //路由名称
    component: () => import('@/unitui/pages/404.vue'), //加载模板文件
    meta: {
      show_site: 0, //是否全屏显示0为全屏显示，1为显示在框架内
      web_title: "404" //网站标题
    }
  },
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})
router.beforeEach((to, ) => {
  document.title = to.meta.web_title //生成网站标题
  // console.log(to);
  // console.log(from);
  // ...
  // 返回 false 以取消导航
  // return false
})
export default router
```
2、main.js做出如下调整。
```javascript
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)

```
3、核心代码/unitui/init_route.js即动态路由生成功能，如果你不是使用element你要参考这个代码进行路由生成。
```javascript
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()//这里是调用该函数
```

#### 如喜欢

你可以给我点小心心，或者关注我


#### 特技

1.  使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
2.  Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
4.  [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
5.  Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
6.  Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)