container-vue-element
a vue admin packages
Build Setup
npm install container-vue-element -D
npm install builder-vue -D
npm install element-ui -D
配置
1、引入container-vue-element容器组件
import ContainerVueElement from 'container-vue-element'
Vue.use(ContainerVueElement)
2、在builder-vue vuex中配置 容器组件
store.state.container = { template: '<cve-layout/>' }
数据结构(必须)(store.state.apiUrl返回的数据结构json)
1、在apiUrl下面增加 topNav(顶部导航通信地址)
{
"apiUrl":{
"topNav":"http://corecmf.dev/api/admin/nav/top"
}
}
2、在config下面增加 topNavActive(默认激活顶部菜单)
{ "config":{ "topNavActive":"admin" } }
3、apiUrl>topNav通信地址数据返回要求 例子如下:
1、apiUrl 为侧栏数据通信地址
{ "admin": { "name": "admin", "title": "系统", "icon": "fa fa-cog", "sort": 0, "apiUrl": "http://corecmf.dev/api/admin/nav/sidebar" }, "cms": { "name": "cms", "title": "文章", "icon": "fa fa-archive", "sort": 1, "apiUrl": "http://corecmf.dev/api/cms/nav/sidebar" } }
4、apiUrl>topNav => apiUrl 侧栏通信地址数据返回要求
1、subMenus子菜单信息(可以多级)(包含subMenus的侧栏path自动失效)
2、path 前端访问路径
{ "0": { "title": "首页 Dashboard", "icon": "fa fa-dashboard", "path": "/admin/dashboard", }, "1": { "title": "系统功能", "icon": "fa fa-cog", "path": "", "subMenus": { "2": { "title": "系统设置", "icon": "fa fa-wrench", "path": "/admin/system/system", }, } },
}
For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).