首页 / Vue.js / 正文

基于Vue.js+iview的极简后台管理系统模板--DncVueSample

9701 2评论 发布于: 2018-09-10 读完约需4分钟

关于DncVueSample

VncVueSample码友网(https://codedefault.com) 发布并提供更新支持。

作者:Rector

演示地址:https://codedefault.github.io/DncVueSample/

DncVueSample: 是一个基于Vue.js + iview 前端框架搭建的后台管理系统模板,适用于如:OA,CRM,CMS等管理系统的后台开发。

模板简介

版本信息

DncVueSample当前依赖的组件的版本信息如下:

Vue.js: 2.5.17
iview: 3.1.0

布局和菜单

该模板以左菜单,右操作面板来布局。左侧菜单树目前支持两级菜单,菜单树以JSON格式定义。其中,菜单项支持指定图标,菜单的链接地址等选项,详细的配置属性如:

{
    title:"用户及授权",
    name:"1",
    icon:"logo-apple",
    menuItem:[
        {
            label:"用户管理",
            name:"1-1",
            href:"/account/user/list",
            icon:"logo-apple"
        },
        {
            label:"资源管理",
            name:"1-2",
            href:"/account/resource/list",
            icon:"logo-windows"
        },
        {
            label:"角色管理",
            name:"1-3",
            href:"/account/role/list",
            icon:"logo-tux"
        }
    ]
}

左侧菜单支持收起和展开,当菜处于收起状态时,只显示菜单项的图标,这样使得整个系统的在横向的操作界面空更宽一些,在数据的展示上效果会更好。

选项卡

右侧操作区是以选项卡(iframe)打开的各个操作界面,每个选项卡页面均为一个独立的页面。

当点击每个选项卡时,左侧菜单会自动跟踪到当前打开的菜单上。

选项卡切换时,支持切换动画效果,视觉体验非常不错。

结束语

DncVueSample是一个极简的基于Vue.js + iview 实现的静态后台管理系统模板,她仅是一个后台管理系统模板的雏形UI,不涉及系统功能,但所谓“麻雀虽小五脏俱全”,选择DncVueSample作为后台管理系统的初始模板,可以帮助使用者快速地开始项目的开端UI框架的搭建。

注:DncVueSample目前没有适配移动端设备和IE10以下古老的浏览器,所以请在PC设备中使用现代浏览器预览和使用。

代码开源

没错,DncVueSample是开源的,你可以使用DncVueSample模板框架做任何的集成或者开发。

源代码托管地址: https://github.com/codedefault/DncVueSample

版权声明:本作品系原创,版权归码友网所有,如未经许可,禁止任何形式转载,违者必究。

上一篇: [ASP.NET Core]在ASP.NET Core跨平台应用程序开发中如何捕获并处理全局异常(Global Exception)?

下一篇: [ASP.NET Core]在ASP.NET Core跨平台应用程序开发中如何返回带有Http状态码的JSON数据?

本文永久链接码友网 » 基于Vue.js+iview的极简后台管理系统模板--DncVueSample

分享扩散:

发表评论

登录用户才能发表评论, 请 登 录 或者 注册

热门评论

kk (2018-10-09 15:25)

用不了啊
回复 赞(0)

kk (2018-10-09 15:19)

没做完吧
回复 赞(0)