公共组件库实施

2021-05-07

底层原则

随着系统应用越来越多，我们对系统进行了微前端的改造，同时改造带来一个组件复用的问题需要解决，经过调研，最终还是决定使用npm包的形式进行公共组件的开发维护工作

npm 包所在位置：https://www.npmjs.com/package/pms_components

源代码所在位置：http://gitlab.aiforward.cn/fe/pms_components

组件库组件分两类：业务组件和基础组件

为了保证与迁移之前使用方式一致，还对部分组件进行了写法上的调整

组件分类:基础组件&业务组件

安装

1	npm i pms_components

使用

import PmsComponents from 'pms_components'

import 'pms_components/lib/theme/index.css'

Vue.use(PmsComponents)

依赖

vue-virtual-scroller

v-viewer

vue-resize-observer  ## 组件的更新及发布

基础组件

基础组件的使用可以直接像上边的方式去用，通过引入pms_components和css即可，也可以进行按需引用
基础组件就是不依赖项目环境的组件，他可以放在任意的项目中去使用，使用方法比较简单。

EmptyLayout 组件–空页面

ImportModal 组件–导入弹层

FwAffixTable 组件–表格

FwBadge 组件–徽章

FwBreadcrumb 组件–面包屑

FwFlexCard 组件–卡片展示

FwRadioTab 组件–标签选项卡

FwSteps 组件–步骤展示

InputNumberWithAddon 组件–数字带后缀

ImageHolder 组件–图片展示

ImageViewer 组件–图片查看组件

TitleAndOperate 组件–标题隔离

LongTextPopover 组件–长文本弹窗

业务组件

业务组件的使用稍微麻烦些，由于它依赖项目的运行环境，这里主要是请求中的token等信息，所以需要在项目中
重新定义一下对应的组件，在我们的项目中fpms_app_template有这几个的基本示例代码，我们将业务组件进行
简单的二次包装，同时将项目的request方法默认传入组件，这样不同项目请求方式就是统一的了。

import FwCascader from 'pms_components/packages/FwCascader/FwCascader.vue'
import { axios } from '@/utils/request'
export default {
  name: 'FwCascader',
  components: {
    FwCascader
  },
  render () {
    const props = { ...this.$attrs }
    props.axios = axios
    return (
      <FwCascader props={ props } on={ this.$listeners } scopedSlots={ this.$scopedSlots }>
        { Object.keys(this.$slots).map(name => (<template slot={name}>{this.$slots[name]}</template>)) }
      </FwCascader>
    )
  }
}

这里主要作用是把项目的request方法传进组件，使用具体项目的请求方式。

LocationCascader 组件–位置选择组件

UnionLocationCascade 组件–组合位置选择

RegionCascader 组件–地区选择组件

upload 组件–上传

FwCascader 组件–房屋选择

组件打包

基础组件会打包，业务组件不打包，业务组件打包时间会很长也是个问题，通过区别基础组件和业务组件的使用方式，可以避免这一情况

打开pms_components项目

控制台输入npm login,输入帐号和密码即可登录

npm run uv # 增加版本号

npm run lib:cli # 对项目进行打包

npm publish # 将包发布到npm仓库

新组件开发及使用

新组件开发完，在fpms_components中增加示例代码

同时确保在项目fpms_app_template中使用没问题的情况下再发布,可以直接吧libs目录放在fpms_app_template的node_modules对应的包中测试