npm install vue-frame-crm --save || npm install vue-frame-crm@xxx --save
- npm run build 进行编译和打包
- 切换到当前项目目录
- 切换 npm 源到 npm 源(https://registry.npmjs.org/): 只针对有自身源的情况
- npm login
- 修改 package.json 的版本号
- npm publish
/**
* 需要将frame组件注册到Vue中
*/
/* 全局注册 */
import Vue from 'vue'
import { TFrame } from 'vue-frame-crm'
Vue.use(TFame)
/* 局部注册, */
import { TFrame } from 'vue-frame-crm'
export default {
...
components: {
TFrame
},
...
}
/**
* 在模版中使用
*/
<t-frame
:img="img"
:imgMin="imgMin"
:logo-router="logoRouter"
:authorization="authorization"
:tag="tag"
:count="count"
:navs="navs"
:instance="$cmi">
</t-frame>
export default {
data () {
return {
logoRouter: { name: 'portal'},
img: img,
imgMin: imgMin,
authorization: authorization,
tag: 'CRM',
menuList: [],
navs: [
{
type: 'icon',
icon: 'bell'
},
{
type: 'dropdown',
icon: 'account-circle',
children: [
{
name: 'icon1'
},
{
name: 'icon2'
},
{
name: 'icon3'
}
]
},
{
type: 'icon',
icon: 'arrow-right-bold-box-outline',
handleType: 'logout'
}
],
count: 6
}
}
}
-
frame 组件的提供的参数
-
img [string] 左上角的 logo 图标
-
imgMin [string] 左上角的 logo 缩小图标
-
logoRouter [object] 左上角的 logo 图标的路由
-
authorization [object] 配置文件设置
-
tag [string] 当前系统的类型,用于判断是否在本系统中跳转
-
count [number] 右上角未读消息的个数
-
menuList 渲染 menu 菜单 { iconType, 一级菜单的右侧 icon 的 type,对应的是 aidesign 的图标库 menuName, 当前菜单的名称 menuUrl, 路由 url systemUrl, 非本系统 host 路由 (根据 rightTag 与 tag),非本项目的链接 systemUrl + menuUrl }
-
activeMenu [String, Number] 当前展开的 menu
-
navs [array] 渲染头部 menu { type, 'icon'| 'dropdown' | 'avatar' icon, 图标 icon 的 type,对应的是 aidesign 的图标库 children, 如果是 dropdown 时需要提供 dropdownitem }
-
navs: [
{
type: "icon",
icon: "bell",
},
{
type: "dropdown",
icon: "account-circle",
children: [
{
name: "icon1",
},
{
name: "icon2",
},
{
name: "icon3",
},
],
},
{
type: "icon",
icon: "arrow-right-bold-box-outline",
handleType: "logout",
},
];
- instance 服务调用实例
以 auth2 的方式,将存在 sessionStorage 中 token 注册入请求头中(传入的是 axios 的实例)
- 用法
/**
* httpHandle 有两个函数
* requestInterceptor (config, authorization, tokenUri)
* handleResponseError (error, authorization)
* http.js 最写入
*/
import { httpHandle } from 'vue-frame-crm'
import authorization from './authorization.js'
function requestInterceptor (config) {
...
let conf = httpHandle.requestInterceptor(config, authorization, authorization.tokenUri)
return merge(config, conf)
}
在进入路由之前判断注册
/**
* beforeEach(to, from, next, authorization, requestInstance, cb)
* 在router.js 中写入
*/
import { route } from "vue-frame-crm";
import authorization from "./authorization.js";
router.beforeEach((to, from, next) => {
route.beforeEach(to, from, next, authorization, http.$cmi);
});