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