@vuice/layout

插件基于vue-element-admin项目封装，推荐基于vue-element-admin开发的项目使用本插件，项目目录

├── build                      # 构建相关
├── mock                       # 项目mock 模拟数据
├── plop-templates             # 基本模板
├── public                     # 静态资源
│   │── favicon.ico            # favicon图标
│   └── index.html             # html模板
├── src                        # 源代码
│   ├── api                    # 所有请求
│   ├── assets                 # 主题 字体等静态资源
│   ├── components             # 全局公用组件
│   ├── directive              # 全局指令
│   ├── filters                # 全局 filter
│   ├── icons                  # 项目所有 svg icons
│   ├── lang                   # 国际化 language
│   ├── layout                 # ********************插件基于layout封装**************************#
│   ├── router                 # 路由
│   ├── store                  # 全局 store管理
│   ├── styles                 # 全局样式
│   ├── utils                  # 全局公用方法
│   ├── views                  # views 所有页面
│   ├── App.vue                # 入口页面
│   ├── main.js                # 入口文件 加载组件 初始化等
│   └── permission.js          # 权限管理
├── tests                      # 测试
├── .env.xxx                   # 环境变量配置
├── .eslintrc.js               # eslint 配置项
├── .babelrc                   # babel-loader 配置
├── .travis.yml                # 自动化CI配置
├── vue.config.js              # vue-cli 配置
├── postcss.config.js          # postcss 配置
└── package.json               # package.json

注意：删除项目中的layout文件夹，取消styles/sidebar.scss样式文件引入，防止样式冲突。

快速开始

npm install @vuice/layout --save

项目配置

main

// main.js文件

// 引入插件样式
import '@vuice/layout/src/styles/index.scss'
// 可以通过init来初始化项目，init封装了keycloak
import { init } from '@vuice/layout'

init(Vue, {
  el: '#app',
  router,
  store,
  i18n,
  render: h => h(App)
}).catch(err => console.error(err))

// 如果要引入项目中的面包屑Breadcrumb组件，可以通过bindComponent方法来使用
import { bindComponent } from '@vuice/layout'
import Breadcrumb from '@/components/Breadcrumb'

// 1.通过init方法来使用
init(Vue, {
  el: '#app',
  router,
  store,
  i18n,
  render: h => h(App)
}).then(ret => bindComponent(Vue, Breadcrumb))
.catch(err => console.error(err))
// 2.在vue初始化后，调用 bindComponent(Vue, Breadcrumb)

router

// router/index.js
import Layout from '@vuice/layout/src/layout/Layout.vue'


[{
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [{
      path: 'dashboard',
      name: 'Dashboard',
      component: () => import('@/views/dashboard/index'),
      meta: { title: 'Dashboard', icon: 'dashboard' }
    }]
  },
  {
    path: '/example',
    component: Layout,
    redirect: '/example/table',
    name: 'Example',
    meta: { title: 'Example', icon: 'dashboard' },
    children: [
      {
        path: 'table',
        name: 'Table',
        component: () => import('@/views/table/index'),
        meta: { title: 'Table' }
      },
      {
        path: 'tree',
        name: 'Tree',
        component: () => import('@/views/tree/index'),
        meta: { title: 'Tree' }
      }
    ]
}]

注意：1. 图标icon仅支持svg格式，并且要在icons/icon文件夹中一一对应;

store

// store/index.js
import getters from './getters'
import layoutStore from '@vuice/layout/src/store' // 引入插件的store模块
import { bindRoutes } from '@vuice/layout'

Vue.use(Vuex)
const { headerApp, headerUser, headerGetters } = { ...layoutStore } // 引入插件的store模块
bindRoutes("authRoutes") // 引入权限过滤之后的路由数组，authRoutes为getters中对应的名称，用户自行更改
const store = new Vuex.Store({
  modules: {
    headerApp,
    headerUser,
    ...   // 添加合并模块
  },
  getters: Object.assign(getters, headerGetters) // 添加合并模块
})

// getters.js
  
const getters = {
  ...,
  authRoutes: state => state.xxxx.authRoutes,
  ...
}
export default getters

配置文件

// public/config/config.json
{ 
  // sidebar所显示的系统名称
  "systemName": "事件总线",
  
  // 当前环境
  "environment": "prod",
  // 测试开发环境
  "dev": {
    "iamUrl": "https://auth-test.inspurcloud.cn/auth",
    "clientId": "yunzhou",
    "realm": "picp",
    "baseUrl": "http://console-test.yzh.inspur.com"
  },
  // 生产环境
  "prod": {
    "iamUrl": "https://auth1.cloud.inspur.com/auth ",
    "clientId": "yunzhou",
    "realm": "picp",
    "baseUrl": "http://console-test.yzh.inspur.com"
  }
  // xxx环境
  "xxx": {
    ...: ...
  }
  
  // 其他配置
  ...
}

因为header中总览、用户设置、密码设置等路径跟环境有关，因此需要配置环境

加载配置文件

// main.js
import {init, loadConfig(path) } from '@vuice/layout'

// 1.可以通过init方法来加载配置，默认配置文件放在public/config/config.json,也可以指定路径path
init(Vue, options, path) // Vue, options用来初始化Vue

// 2. 也可以调用loadConfig方法，默认配置文件放在public/config/config.json,也可以指定路径path
loadConfig(path)