meixiLayout

    |-- lib ---------------------------------------- 打包后的文件夹
    |   |-- demo.html
    |   |-- meixilayout.common.js
    |   |-- meixilayout.umd.js
    |   |-- meixilayout.umd.min.js
    |-- packages ----------------------------------- 插件目录
    |   |-- config.js
    |   |-- index.js
    |   |-- Layout
    |       |-- index.vue
    |       |-- utils.js
    |       |-- components ------------------------- 组件目录
    |           |-- footer.vue
    |           |-- navBar.vue
    |           |-- newSlideBar.vue
    |           |-- newSlideBarTop.vue
    |           |-- slideBar.vue
    |           |-- slideDrag.vue
    |           |-- navBar ------------------------- 顶部栏
    |           |   |-- toggleTheme.vue
    |           |   |-- navBarPlugin
    |           |   |   |-- navBarPlugin.vue
    |           |   |-- navUser
    |           |   |   |-- navUser.vue
    |           |   |-- nav_bar_left
    |           |       |-- nav_bar_left.vue
    |           |       |-- nav_bar_router.vue
    |           |-- slideBar ------------------------ 侧边栏
    |               |-- item.vue
    |               |-- link.vue
    |               |-- logo.vue
    |               |-- slideBarItem.vue
    |-- public
    |   |-- favicon.ico
    |   |-- index.html
    |-- src

Project setup

npm install

使用

// 挂载至路由页面中的component属性中
// 这里以仪表盘页面举例
// 引入  router-index.js中
import meixilayout from 'meixilayout';

{
    path: '/', 
        // 使用布局组件
    component: meixilayout.layout,
    redirect: '/dashboard',
    meta: {
    title: '仪表盘',
        icon: 'meixicomponenticon-yuansu',
        noCache: false,
},
    children: [
        //子路由随意使用你自定义的组件
        component:'xxxx.vue',
    ]
}

//动态路由中使用 参考各个子系统中的 utils->asyncRouter.js
if (item.component === "Layout") {
    //挂载layout组件
    newItem.component = meixilayout.layout;
} else {
    //子路由的组件随意挂载
    newItem.component = (resolve) =>
        require([`@/pages/${item.component}`], resolve);
}