uni-uAdmin：基于uniapp+uViewUI的跨终端后台管理模板-uni-app后台示例

一、前言网上的后台管理系统很多都是PC网页，手机端的后台系统比较少。跨终端的手机后台管理模板很少。于是用uniapp+uview-ui+uni-ui鼓捣了一个跨设备后台管理系统uniapp-uadmin项目。uni-uAdmin项目是基于uniapp+vue.js+uView-ui+uni-ui+mock.js等技术开发的跨端后台管理系统模板项目。2.技术框架编辑器：HbuilderX3.3.5使用技术：vue+uniapp+uViewUI+mockjs弹窗组件：ua-popup（基于uni-app跨终端组件）表格组件：ua-table（基于uni-app封装multi-functionaltable）自定义组件：uaDock全新dock样式tabbar组件图表组件：u-charts图表库模拟数据：mock.js全新磨砂玻璃视觉UI纹理，使用图表、自定义表格、表格、瀑布图和Graphic编辑器等业务模块，动态权限管理，错误页面处理，可编译为H5+小程序+APP端3.项目结构目录4.公共模板页面分为顶部自定义导航栏+内容区+底部dock菜单三大部分。支持动态组件控制权限和错误页面自动跳转提示。项目比较创新的地方之一就是底部的dock菜单，可以像uniapp原生的tabbar一样切换，左右滑动切换，可以自定义图标和标题文字。菜单的props选项可以在下面的参数配置中传入props:{//当前索引current:{type:[Number,String],default:0},//背景颜色bgcolor:{type:String,default:null},/***[menuoption]type　　　　菜单类型type：'tab'支持uni.switchTab切换类型：'divider'分割线路径　　　　菜单页面地址图标　　　　菜单图标-iconfont图标img　　　　菜单图片颜色　　　菜单图标颜色标题　　　标题徽章　　　点号点小红点*/menu:{type:Array,default:()=>[/*Tabmenu*/{type:'tab',path:'/pages/index/index',icon:`\ue619`,color:'#2979ff',title:'Home',},{type:'tab',path:'/pages/component/index',icon:'icon-组件'，颜色：'#17c956'，标题：'组件'，徽章：5，}，{类型：'tab'，路径：'/pages/permission/index',icon:'icon-auth',color:'#f44336',title:'权限管理',},{type:'tab',path:'/pages/setting/index',icon:'icon-wo',color:'#8d1cff',title:'设置',dot:true,},{path:'/pages/error/404',img:require('@/static/mac/keychain.png'),title:'错误页面',},{type:'divider'},/*导航菜单*/{img:require('@/static/logo.png'),title:'github',},{img:'https://www.uviewui.com/common/logo.png',title:'gitee',},{img:require('@/static/mac/colorsync.png'),title:'皮肤',},{img:要求('@/static/mac/info.png'),title:'About',},{type:'divider'},{img:require('@/static/mac/bin.png'),title:'回收站',badge:12,},]},},//标签切换switchTab(index,item){if(item.path){lettype=item.type=='tab'?'switchTab':'navigateTo'uni[type]({url:item.path,})}else{if(item.type=='tab'){this.currentTabIndex=index}}this.$emit('click',index)}在另一项中使用的表格组件也是我自己开发的一个uniapp表格组件插件ua-table。支持多行、多列、固定表头、自定义槽内容、点击行列返回数据等功能。使用起来非常简单，如下，创建一个简单的窗体。script>importMockfrom'mockjs'exportdefault{data(){return{columns:[{type:'index',align:'center',width:100,fixed:true},//索引号{prop:'title',label:'title',align:'left',width:'350'},{prop:'num',label:'searchvolume',align:'center',width:120},],数据:Mock.mock({total:100,page:1,pagesize:10,'list|10':[{id:'@id()',title:'@ctitle(10,20)',num:'@integer(1000,10000)'}]}),}}}表格也支持固定表头和自定义内容，类似于饿了么组件库。编辑删除但是需要注意的是，如果将uniapp的多个v-for编译成小程序，自定义的slot会失效。你需要自己处理。好了，基于uniapp开发的后台系统分享就到这里了，希望对大家有所帮助~~最后附上一个uniapp短视频工程https://segmentfault.com/a/11...