Pms_components NPM

锋物物管系统-平台系统公共组件项目

组件分类

组件分为基础组件和业务组件

组件打包后的代码放在npm上
基础组件为 pms_components 组件代码地址 pms_components
业务组件为 pms_business 组件代码地址 fpms_app_template

安装服务

基础组件为 npm i pms_components
业务组件为 npm i pms_business
基础组件使用：
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 组件--房屋选择
Warehouse 仓库业务组件
基础组件组件打包
基础组件会打包，业务组件不打包，业务组件打包时间会很长也是个问题，通过区别基础组件和业务组件的使用方式，可以避免这一情况
npm run uv # 增加版本号
npm run lib:cli # 对项目进行打包
npm publish # 将包发布到npm仓库
业务组件直接上传npm
业务组件直接上传npm,不用打包，更新完package的版本号后，直接npm publish
npm publish # 将包发布到npm仓库
新组件开发及使用
新组件开发完，在pms_components中增加示例代码
同时确保在项目fpms_app_template中使用没问题的情况下再发布,可以直接吧libs目录放在fpms_app_template的node_modules对应的包中测试