阅读 59

cli压缩包密码?Unituicli3.0.1可视化动态路由和菜单快速开发框架!

体验地址:http://unitui.gitee.io/unituicli3

目录结构:│ init_route.js//路由初始化js非常重要一定理解

├─assets//静态文件

│ │ login_back_image.jpg//登录、注册、找回密码背景图

│ │

│ └─json//模拟后端返回的json信息

│ menu.json//菜单json

│ route.json//路由json

├─pages//一些常用页面

│ 404.vue//404错误

│ Forget.vue//忘记密码

│ Login.vue//登录页面

│ Register.vue//注册页面

├─sub//组件

│ Uicon.vue//图标选择组件

├─subadmin//组件管理

│ │ SubAdmin.vue//路由管理

│ │

│ └─sub

│ │ MenuAdmin.vue//菜单管理组件

│ │ RouteAdmin.vue//路由管理

│ │

│ ├─menu_admin_sub

│ │ Addmenu.vue//添加菜单

│ │ Addmenuitem.vue//添加二级菜单

│ │ Menuedit.vue//菜单编辑

│ │ Menuitemedit.vue//二级菜单编辑

│ │

│ └─route_admin_sub

│ AddChildrenRoute.vue//嵌套路由添加

│ Addroute.vue//路由添加

│ Routeedit.vue//路由编辑

└─ui//视图框架

│ Aside.vue//左侧菜单

│ Footer.vue//底部内容

│ Header.vue//顶部菜单

└─header//顶部菜单组件

Menu.vue//菜单点击显示组件

更新介绍优化login.vue代码,减少代码量,将动态路由添加功能全部集成到unitui/init_route.js文件中,已经详细注释可以去看源码。优化unitui/init_route.js使它可以支持调用和刷新自动加载。优化main.js去除全局组件,仅需引用init_route.js便可完成刷新路由自动添加。优化组件管理组件代码安装使用1、我们以下的安装方法默认你的电脑已经具备node加vuecli环境。

2.1通过git clone https://gitee.com/unitui/unituicli3.git获取源码

2.2下载压缩包获取源码

2.3在项目下执行“npm install”,然后通过npm run serve运行项目

项目介绍Unitui意为组件式UI框架,unituicli3指基于vue3搭建的一个项目,你可以通过这个框架可以快速搭建一个vue开发项目。

Unituicli3与其他传统的框架是不同的,unitui目的是尽可能减少对开发者的影响,从而我们在src文件夹下新建了unitui文件夹用于防止我们默认的内容,减少对开发框架的影响,你可以将views和components文件夹清空,它不会对框架造成影响。

我们仅集成3个JavaScript库:

"element-plus": "^1.0.2-beta.70",

"vue": "^3.0.0",

"vue-router": "^4.0.0-0"

其他你需要的组件需要自己安装。

组件管理介绍示例图

在导出json前需要选择要导出的项目,以便实现鉴权。路由管理中文件位置前不需要加@/,如在ivews文件夹下有hello.vue组件,那么我们文件位置应该填入的内容应该是‘ivews/hello.vue’即可。

Unitui因为有《组件管理》组件才具有灵魂

怎样实现鉴权你在组件管理中导出不同的路由和菜单json,然后存在后端,根据不同的用户类别返回不同的路由和菜单json进行路由生成和菜单生成从而实现鉴权

Init_route.js文件介绍这是一个极其重要的js文件,你需要了解它,这个js依据路由session存储信息,生成动态路由,你需要在login.vue和main.js中引入它。

在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 init_route from "@/unitui/init_route.js";

在方法中通过

Init_route.init_route()

注意一定要提供sessionStorage

文章分类
百科问答
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐