1.1.0 • Published 4 years ago
@vcores/layout v1.1.0
插件基于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 @vuelement/layout --save
项目配置
main
// main.js文件
// 引入插件样式
import '@vuelement/layout/src/styles/index.scss'
// 可以通过init来初始化项目,init封装了keycloak
import { init } from '@vuelement/layout'
init(Vue, {
el: '#app',
router,
store,
i18n,
render: h => h(App)
}).catch(err => console.error(err))
// 如果要引入项目中的面包屑Breadcrumb组件,可以通过bindComponent方法来使用
import { bindComponent } from '@vuelement/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 '@vuelement/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 '@vuelement/layout/src/store' // 引入插件的store模块
import { bindRoutes } from '@vuelement/layout'
Vue.use(Vuex)
const { headerApp, headerUser, headerGetters } = { ...layoutStore } // 引入插件的store模块
bindRoutes("authRoutes") // 引入权限过滤之后的路由数组,authRoutes为getters中对应的名称,用户自行更改
// 1.第一种写法
const store = new Vuex.Store({
modules: {
headerApp,
headerUser,
... // 添加合并模块
},
getters: Object.assign(getters, headerGetters) // 添加合并模块
})
// 第二种写法
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
// set './app.js' => 'app'
const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
const value = modulesFiles(modulePath)
modules[moduleName] = value.default
return modules
}, {})
// 添加合并模块
Object.assign(modules, { headerApp, headerUser})
const store = new Vuex.Store({
modules,
getters: Object.assign(getters, headerGetters) // 添加合并模块
})
// getters.js
const getters = {
...,
authRoutes: state => state.xxxx.authRoutes, // 用户自行更改
...
}
export default getters
配置文件
// public/config/config.json
{
// sidebar所显示的系统名称
"systemName": "事件总线",
"baseUrl": "http://yzh.inspur.com/",
// 当前环境
"environment": "prod",
// 测试开发环境
"dev": {
"clientId": "yunzhou", // keycloak clientId
"realm": "picp", // keycloak realm
"consoleUrl": "http://service-test.yzh.inspur.com/apistore/apis", // 获取链接列表的地址
},
// 生产环境
"prod": {
"clientId": "yunzhou",
"realm": "picp",
"consoleUrl": "http://service.yzh.inspur.com/apistore/api", // 获取链接列表的地址
},
// xxx环境
"xxx": {
...: ...
}
// 其他配置
...
}
加载配置文件
// main.js
import {init, loadConfig } from '@vuelement/layout'
// 1.可以通过init方法来加载配置,默认配置文件放在public/config/config.json,也可以指定路径path
init(Vue, options, path) // Vue, options用来初始化Vue
// 2. 也可以调用loadConfig方法,默认配置文件放在public/config/config.json,也可以指定路径path
loadConfig(path)
页面缓存问题
<!-- layout/components/AppMain.vue 文件-->
<section class="app-main" :style="{'top': hasNavbar ? '56px' : '0'}">
<transition name="fade-transform" mode="out-in">
<keep-alive>
<!-- 需要缓存的视图组件 -->
<router-view v-if="$route.meta.noCache === false"></router-view>
</keep-alive>
</transition>
<transition name="fade-transform" mode="out-in">
<!-- 不需要缓存的视图组件 -->
<router-view v-if="$route.meta.noCache === true || $route.meta.noCache === undefined"></router-view>
</transition>
</section>
子路由的侧边栏渲染问题
通过在子路由元数据中添加activeMenu
字段来控制当前路由未在侧边栏显示时,侧边栏选中的路由地址,'activepath'
代表侧边栏选中的路由地址
meta: {
activeMenu: 'activepath'
}
token
token存放由Session Storage转为cookie, key值改为inspur_token
,操作token的方法可以通过插件引入
import { getToken, setToken } from '@vuelement/layout'