vue框架搭建对于二次开发组件的处理思考及解决方案

前言

在框架搭建时经常会遗漏一些公共组件库的实现，例如elementUI所实现的el-button，认为在业务实现时对于其进行个性化开发即可，但是经历过一些项目后，发现如此操作会有一些问题，本文主要简单聚焦于此
全文仅以el-button为例

背景

业务使用组件库问题list

• 中后期产品需求变更、UI样式变更，如此需要对项目内全量的el-button标签进行个性化调整，此时工作量是巨大并且重复的
• 部分特殊值，默认值与常用值不一致，大量组件属性重复命名，例如el-button type属性在某个业务内全部需要声明为primary，但是重复声明使用对于前端来说是需要注意的，尤其是从他处copy的代码
• 公司对某组件进行二次开发，但有正在进行的业务需要使用此类组件二次开发功能
• …等等

解决方案

博主方案基本思路均为对el-button二次开发为主，如下为二开代码

<script>
import { Button } from 'element-ui'
export default {
  extends: Button,
  props: {
    plain: {
      type: Boolean,
      default: true
    },
    type: {
      type: String,
      default: 'primary'
    }
  }
}
</script>

<script>
import {Tree} from 'element-ui'
export default {
  props: {
    value: {
      type: Array,
      default: () => []
    }
  },
  extends: Tree,
  watch: {
    value:{
      immediate:true,
      handler(val){
          this.$nextTick(()=>{
            this.setCheckedKeys(val);
          })
      }
    }
  },
  created() {
    this.$on('check-change',()=>{
      this.$emit("input",this.getCheckedKeys())
    });
  }
};
</script>

如上均是对于业务开发时各种痛点进行处理，但是组件声明到项目内却有多种方式

声明到项目

1. 随用随引，需要自行注册到vue页面内
   此方案虽然简单粗暴，便于新人理解并跟踪代码，但是却与简化开发背道而驰，为了少些10个字符却多写了两行以上的代码得不偿失

2. 注册到全局组件内，但使用与el-button截然不同的组件名（例如z-button）
   此方案可以全局使用二开组件，但是对于已经使用原组件的页面，仍需要对已使用的组件进行更名操作

3. 二开组件注册全局组件并覆盖原el-button组件
   即二开组件注册为el-button，替换原有组件，此操作会进行全局污染，造成所有组件的指向替换

对于二开组件放在项目的什么位置如何使用，各位仁者见仁智者见智，博主只是给各位提供一些思路，具体实现因项目需求而议