vue ts项目同时引入ant-design和element-ui，ts报错不能编译打包失败

1. 错误信息:

   Subsequent property declarations must have the same type. Property ‘$confirm’ must be of type ‘(modalOptios: ModalOptions) => ModalConfirm’, but here has type ‘ElMessageBoxShortcutMethod’.

   Subsequent property declarations must have the same type. Property ‘$message’ must be of type ‘Message’, but here has type ‘ElMessage’.

2. 简单说下
   通常vue项目只会用到一个ui库，但是往往会有一些特殊场景一个ui库不满足我们业务场景，我工作中的项目是ts版本的, 使用到了ant-design-vue（全局引入）和element-ui（按需加载）, 按需加载使用了cascader(级联选择框)

   费劲辛苦的度娘以及谷歌了好多解决方案, 没有十全十美的能解决这个问题, 既需要能本地ts编译不报错, 还需要能npm build能打包, 而且ant-design-vue还要和element-ui 不能互相影响, element-ui最好还要按需加载, 挺折磨人的呀

   没事, 编程就是要稳住心态细细考究, 终于功夫不负有心人, 最终完全符合了我们项目的要求

3. 解决方案
   a. 首先正常的引入ant-design-vue , 按官网来就可以
   b. 重点是接下来的elemet-ui 的按需引入
   c. 首先引入element-ui 插件

   	npm i element-ui -S
   

   d. 借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。首先，安装 babel-plugin-component：

   	npm install babel-plugin-component -D
   

   e. 然后在main.ts中按需引入element-ui

   	import ElCascader from 'element-ui/lib/cascader';
   	
   	import 'element-ui/lib/theme-chalk/cascader.css';
   	
   	import 'element-ui/lib/theme-chalk/icon.css';
   	
   	Vue.component('el-cascader', ElCascader);
   

   f. 然后再tsconfig.json中的paths下面新增加个element-ui/lib/cascader, 如下

   	"compilerOptions":{
   		"paths":{
   			"element-ui/lib/cascader": ["node_modules/element-ui/types/cascader"],
   		}
   	}
   

   g. 这样就可以在.vue文件中使用element-ui的cascader(级联选择框)组件了

   	<el-cascader
          ref="elCascader"
          :props="{
            label: 'purchaseSortName',
            value: 'id',
          }"
          :options="purchaseCategoryList"
          clearable
          placeholder="请选择采购品类"
          @change="purchaseCategoryOnChange"
          v-model="form.info.flowPurchaseAncestors"
          style="width: 100%;"
        >
          <template slot-scope="{ node, data }">
            <span>{{ data.purchaseSortName }}</span>
            <a-tooltip placement="right">
              <span slot="title">
                {{ node.data.explain }}
              </span>
              <span v-if="node.isLeaf" style="font-weight: 600;margin-left: 10px;color: #ccc !important;width: 20px;display: inline-block;"> ! </span>
            </a-tooltip>
            
          </template>
        </el-cascader>