2.0.2 • Published 2 years ago
mat-vuebase v2.0.2
mat-vuebase
安装项目依赖库
npm install mat-vuebase插件介绍
基于 Vue2 实现基础项目搭建，内置axios，cookie封装，提供内置组件及方法，详情配置说明如下
安装外部依赖包:
npm install axios js-cookie
注: 使用element-ui时，提供内置布局组件，安装依赖包，样式文件需要单独引入 ps：其他UI框架按需安装
npm install element-ui初始化插件(main.js)
import Vue from 'vue';
import App from './App';
import Base from 'mat-vuebase';
// ……
Vue.use(Base, {
root: App, /* 入口文件, 默认提供BaseApp组件(修改ui框架后将不可用，此项需配置) */
pages: null, /* require.context('@/views', true, /.router.js$/) -- 加载所有模块的 routers */
modules: null, /* require.context('@/views', true, /.module.js$/) -- 加载所有模块的 stores */
dialogs: null, /* require.context('@/dialogs', true, /.vue$/) -- 加载dialogs目录下所有的弹框 */
components: null, /* require.context('@/components', true, /.vue$/) -- 加载components目录下所有的自定义组件 */
filters: null, /* require.context('@/filters', true, /\.filter\.js$/) -- 加载filters目录下所有的自定义过滤器 */
directives: null, /* require.context('@/directives', true, /.js$/) -- 加载directives目录下所有的自定义指令 */
menus: [], /* require('@/data/current_menu') -- 加载菜单栏 */
managerMode: false, /* 管理者模式 -- 默认为false，解除所有路由，服务配置限制；为true时需要验证登录信息,开启身份认证限制,路由限制, serviceConfigs 配置生效 */
frame: false, /* UI框架 -- 默认为false，不使用ui框架 */
layoutConfigs: { /* 项目布局配置 */
title: '管理中心', /* 项目标题 */
logo: require('assets/logo.svg'), /* logo头像，默认使用内置svg */
showLogo: true, /* 是否展示logo */
isAdmin: true, /* 是否是后台系统(展示导航菜单，头部) */
hasAnimation: false, /* 是否开启路由跳转时的动画效果 */
fixedMenu: false /* 是否固定菜单栏(为打开状态) */
},
routerConfigs: { /* 路由配置 */
redirectPath: '/404', /* 重定向path为 / 的路径 */
mode: 'hash', /* 路由模式 (history / hash) */
base: '', /* 配置单页应用的基路径 */
savedPosition: true, /* 路由跳转时是否开启页面定位 */
checkPrivilege: true, /* 是否校验路由权限 -- 为false时将开放所有已加载的routers访问权限， */
whiteList: [], /* 可选项 -- 设置路由白名单，不进行路由鉴权校验(例如：['/index']) */
meta: {
bind: 'bind', /* 菜单栏绑定的导航定位字段名 */
keepAlive: 'cache', /* 缓存路由的字段名 */
privilege: 'privilege', /* 权限码绑定的字段名 */
hasBack: 'hasBack', /* 是否可返回上一页的字段名 */
breadcrumb: 'breadcrumb' /* 面包屑字段名 */
}
},
serviceConfigs: { /* 服务配置 */
tokenKey: 'jurisdictionId', // 设置cookie变量名
loginPath: '/login', /* 登录页的地址(可以是路由path，可以是外链地址)，默认定位到内置的login页 */
loginApi: 'public/login', /* 用户登录的接口地址 */
userInfoApi: '/auth/getUserInfo', /* 获取用户信息的接口地址 */
privilegeApi: '/auth/getPrivilege' /* 获取权限码的接口地址 */
},
menuMeta: { /* 菜单信息元数据(未开放自定义字段配置) */
menuId: 'menuId', /* 菜单项ID */
menuName: 'menuName', /* 菜单项名称 */
menuCode: 'menuCode', /* 菜单项编码(对应权限码) */
icon: 'icon', /* 菜单项图标 */
parentId: 'parentId', /* 菜单项父级ID */
route: 'route', /* 菜单项跳转地址 路由name */
children: 'children', /* 菜单项子菜单 */
url: 'url' /* 外链地址 (当route为null时) */
},
before: (to, from, next) => {
// 路由前置守卫
next()
},
after: () => {
// 路由后置守卫
}
});
// ……
/* 监听base配置加载完成后挂载vue实例 */
Vue.prototype.$base.$on('finish.load', () => {
// ……
new Vue({
router: Base.router,
store: Base.store,
render: h => Base.render(h)
}).$mount('#app')
})自定义UI框架
插件基于element-ui配置，默认为关闭状态，不使用任何ui框架，可配置为element，使用其他框架时按需修改环境配置
import element from 'element-ui';
/* 引入element组件库样式文件 */
import 'element-ui/lib/theme-chalk/index.css'; --- 可通过cdn方式引入，优化性能
/* UI框架为element时且使用默认提供的BaseApp组件作为根入口时，需加载自定义样式文件 */
import 'mat-vuebase/dist/style.css';
*** 自定义框架frame的几种方法
1. frame: element -- 便捷式，传模块
2. frame: { name: element, options: {} } -- 配置项式，可传参数
3. frame: (Vue) => { Vue.use(element, {}) } -- 函数形式开发,生产环境配置
index.html配置
*** process.env.VUE_APP_STATIC_URL = https://cdn.bootcdn.net/ajax/libs
<link rel="stylesheet" href="<%= process.env.VUE_APP_STATIC_URL %>/element-ui/<%= process.env.EXTERNALS_VERSION['element-ui'] %>/theme-chalk/index.css">
<% if (process.env.NODE_ENV !=='development' ) { %>
<script src="<%= process.env.VUE_APP_STATIC_URL %>/vue/<%= process.env.EXTERNALS_VERSION['vue'] %>/vue.min.js"></script>
<script src="<%= process.env.VUE_APP_STATIC_URL %>/vuex/<%= process.env.EXTERNALS_VERSION['vuex'] %>/vuex.min.js"></script>
<script src="<%= process.env.VUE_APP_STATIC_URL %>/vue-router/<%= process.env.EXTERNALS_VERSION['vue-router'] %>/vue-router.min.js"></script>
<script src="<%= process.env.VUE_APP_STATIC_URL %>/axios/<%= process.env.EXTERNALS_VERSION['axios'] %>/axios.min.js"></script>
<script src="<%= process.env.VUE_APP_STATIC_URL %>/element-ui/<%= process.env.EXTERNALS_VERSION['element-ui'] %>/index.min.js"></script>
<% } %>webpack配置
*** 设置 不打包到bundle的依赖包 ( 开发环境： externals 设置为 {}, 增加 alias 配置 )
let externals = {
vue: 'Vue',
vuex: 'Vuex',
'vue-router': 'VueRouter',
'element-ui': 'ELEMENT',
axios: 'axios'
}
configureWebpack: {
externals,
alias: {
'@': resolve('src'),
ELEMENT: 'element-ui',
Vue: 'vue',
Vuex: 'vuex',
VueRouter: 'vue-router'
}
}dialog统一调用方法
# **dialog.vue
import { DialogMixin } from 'mat-vuebase'
……
mixins: [DialogMixin]
# 在组件中使用弹框 （分为私有和全局公用两种使用方式）
1.私有
import Dialog from './dialogs/Dialog'
2.公共 (配置dialogs文件下)
无需引入，通过组件name唯一识别
this.$dialog.show(弹框组件名, data, callback) //打开弹窗，data: 传递给弹框的数据，callback：弹框关闭后的回调
this.$dialog.close(name, ret) // 关闭弹窗，name: 弹框的实例对象，ret: 传递给callback的参数
###
this.$dialog 实际是将传入的组件挂载到body节点上，与vue实例的根节点同级
因此该方法逻辑上可挂载所有自定义组件，不过受限于在根实例之外，存在样式无法渲染的问题axios的使用
import { http } from 'mat-vuebase'
/* 1.初始化配置axios */
http.setBaseUrl('v1') // 设置接口前缀
http.setDataCode('code') // 设置响应data判断字段名
http.setSuccessCode(200) // 设置请求成功下的状态标识
http.setDataMessage('message') // 设置响应提示字段名
http.setTimeout(1000) // 设置统一timeout，默认为1000s
http.addHeader('Auth-Token', 123) // 设置自定义请求标头(可添加多个)
/*
设置默认错误响应提示消息，ret: 响应请求体
注：element框架时使用内置配置，设置此项后将覆盖
*/
http.setDefaultPrompt((ret) => {})
/*
设置自定义错误响应回调，此项仅可设置http请求状态码为200的响应
注：优先级高于默认，返回值为true时，覆盖defaultPrompt的配置，否则两者将同时触发
*/
http.setErrorPrompt((ret) => {})
/* 2.调用 */
// url: 接口名，params: 请求参数，config: 可选配置参数
get方法: http.get(`${url}?${params}`, config)
post方法: http.post(url, params, config)
delete方法: http.delete(url, params, config)
put方法: http.put(url, params, config)内置方法
this.$base.setMenuVisible(boolean) // 设置是否可见菜单栏
this.$base.setDomainVisible(boolean) // 设置是否可见导航条
this.$base.checkPrivilege(code) // 检查是否存在某个权限码, code: 权限码
this.$base.userLogin(params, tokeKey) // 用户登录时调用的统一方法(是个回调函数) -- params: 请求参数 ，tokeKey: token字段名(例如: 'data.token')
#####
this.$base.$public中绑定了公共可用方法，如下：
1.debounce(handler, delay) --- 防抖
2.throttle(handler, delay) --- 节流
3.deepClone(obj) --- 对象深拷贝内置接口配置
import { InterfaceHelper } from 'mat-vuebase'
/* 设置鉴权接口字段索引 */
InterfaceHelper.setAuthorityField({
loginDataField: 'data.token', // 登录接口的字段索引
userInfoField: 'data', // 获取用户信息的字段索引
privilegesField: 'privileges' // 获取权限码的字段索引
})
版本更新
2.0.2 ———— 修复已知bug，修改默认框架配置，修改配置说明