[TsAdmin]--一款基于Vue.js+Element UI的单页无刷新(无iframe)多选项卡的后台管理系统模板...

前言

很高兴今天在这里跟大家分享一款全新的后台管理系统UI模板--TsAdmin.


TsAdmin是码友网自主开发的一款基于Vue.js+Element UI 的单页无刷新(无iframe)多选项卡的后台管理系统模板,截图如下 :

基于Vue.js+Element UI的单页无刷新(无iframe)多选项卡的后台管理系统模板--TsAdmin

TsAdmin中主要集成了以下的优秀功能:

一、 无限递归的左侧菜单

支持无限级递归的菜单树,你只需要提供格式规范的JSON数组对象即可,如:

[{ title: '系统设置', name: '1 systemsettings', expand: true, uniqueNo: '1 systemsettings', children: [{ title: '首页', name: '首页', path: '/homepage', allowClose: false, uniqueNo: 'homepage', children: [] }, { title: '仪表盘', name: '仪表盘', path: '/dashboard', uniqueNo: 'dashboard', allowClose: true, children: [] },{ title: '用户管理[未实现]', name: '10001usermanagement', uniqueNo: '10001 usermanagement', children: [] }, { title: '角色管理[未实现]', name: '10002 rolemanagement', uniqueNo: '10002rolemanagement', children: [] }, { title: '权限管理[未实现]', name: '10003permissionmanagement', uniqueNo: '10003permissionmanagement', children: [] }] }, { title: '报表设置', name: '2reportsettings', uniqueNo: '2 reportsettings', expand: false, children: [{ title: '表格报表管理[未实现]', name: '20001 gridreportmanagement', uniqueNo: '20001grid reportmanagement', children: [] }, { title: '图形报表管理[未实现]', name: '20002 graphyreportmanagement', uniqueNo: '20002graphy reportmanagement', children: [] }] }]

二、可展开/收缩的左侧菜单

TsAdmin实现了点击头部导航的"菜单开关"来切换菜单的展开/收缩状态,并带炫酷的动画效果

三、整个页面无刷新(且以无iframe实现)

这也是TsAdmin后台模板系统框架比目前流行的其他框架更舒服的地方吧,这也是作者一直在追求和努力实现的后台管理系统的一种方式。在TsAdmin模板中,你将可以体验中SPA的流畅操作以及更好的交互体验,因为TsAdmin是页面无刷新的,也无iframe嵌套的。

四、以选项卡方式打开各个菜单对应的窗体

在TsAdmin中,你将体验到类似桌面应用的选项卡操作体验,每个菜单选项都可以以选项卡的方式在右侧的选项卡显示区域呈现。更高级的是,TsAdmin还支持将当前打开的选项卡添加到头部的工作台,当把选项卡成功添加到工作台后,便可以从工作台中重新打开或者激活对应的窗体。

五、数据双向绑定及前后端分离

数据双向绑定这是肯定的,因为TsAdmin是基于Vue.js的,至于前后端分离,目前预览版的数据还是纯文本的,所以后端还未涉及到。

现在是不是有些期待TsAdmin这套全新的后台管理系统模板呢?那现在就去看看TsAdmin的预览版本是什么样的吧

欢迎大家对TsAdmin踊跃吐槽。同时也欢迎加入码友网的QQ群:483350228,更有其他学习资源和干货下载,欢迎入群。

本文出至 码友网 《[TsAdmin]--一款基于Vue.js+Element UI的单页无刷新(无iframe)多选项卡的后台管理系统模板

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用 Vue-cli 快速搭建基于 Vue.js 的项目结构并在此基础上添加 element-ui 和 three.js 的依赖库。以下是相关的命令: 1. 安装 Vue-cli ``` npm install -g @vue/cli ``` 2. 创建一个基于 Vue.js 的项目 ``` vue create your-project-name ``` 3. 进入项目目录并添加 element-ui 和 three.js 的依赖库 ``` cd your-project-name npm i element-ui three ``` 4. 在 main.js 中导入 element-ui 和 three.js 的样式和组件 ```javascript import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' import * as THREE from 'three' import App from './App.vue' Vue.config.productionTip = false Vue.use(ElementUI) Vue.prototype.$THREE = THREE new Vue({ render: h => h(App), }).$mount('#app') ``` 5. 在 App.vue 中创建一个包含 three.js 场景的组件 ```vue <template> <div class="three-container"></div> </template> <script> export default { name: 'App', mounted () { // 初始化 three.js 场景 const scene = new this.$THREE.Scene() const camera = new this.$THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ) const renderer = new this.$THREE.WebGLRenderer() renderer.setSize(window.innerWidth, window.innerHeight) document.querySelector('.three-container').appendChild(renderer.domElement) const geometry = new this.$THREE.BoxGeometry(1, 1, 1) const material = new this.$THREE.MeshBasicMaterial({ color: 0x00ff00 }) const cube = new this.$THREE.Mesh(geometry, material) scene.add(cube) camera.position.z = 5 const animate = () => { requestAnimationFrame(animate) cube.rotation.x += 0.01 cube.rotation.y += 0.01 renderer.render(scene, camera) } animate() } } </script> <style scoped> .three-container { width: 100%; height: 100%; position: fixed; } </style> ``` 这样就可以创建一个基于 Vue.jselement-ui 和 three.js 的后台管理系统模板
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值