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

组件分类

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

组件打包后的代码放在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对应的包中测试