DncVueSample Download - DncVueSample Source code download

DncVueSample

Other categories

1.0.0

Download

About DncVueSample

VncVueSample is released by CodeDefault.com (https://codedefault.com) and provides update support.

Author:Rector

Demo address: https://codedefault.github.io/DncVueSample/

DncVueSample: It is a back-end management system template based on Vue.js + iview front-end framework. It is suitable for the back-end development of management systems such as OA, CRM, and CMS.

Template introduction

Version information

The version information of the components that DncVueSample currently depends on is as follows:

Vue.js: 2.5.17 iview: 3.1.0

Layout and menu

This template is laid out with a menu on the left and an operation panel on the right. The left menu tree currently supports two-level menus, and the menu tree is defined in JSON format. Among them, menu items support options such as specifying icons, menu link addresses, and detailed configuration attributes such as:

 {
    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"
        }
    ]
}

The left menu supports collapsing and expanding. When the menu is in the collapsing state, only the icons of the menu items are displayed. This makes the horizontal operation interface of the entire system wider and the data display effect will be better.

tab

The operation area on the right is each operation interface opened with a tab (iframe), and each tab page is an independent page.

As each tab is clicked, the left menu automatically tracks to the currently open menu.

When switching tabs, it supports switching animation effects, and the visual experience is very good.

Conclusion

DncVueSample is a minimalist static backend management system template based on Vue.js + iview. It is only a prototype UI of a backend management system template and does not involve system functions. However, as the saying goes, "a sparrow is small but has all the internal organs", DncVueSample is chosen as the template. The initial template of the backend management system can help users quickly start building the UI framework of the project.

Note: DncVueSample is currently not adapted to mobile devices and ancient browsers below IE10, so please use a modern browser on your PC device to preview and use it.