vue ts项目同时引入ant-design和element-ui,ts报错不能编译打包失败
错误信息:Subsequent property declarations must have the same type. Property ‘$confirm’ must be of type ‘(modalOptios: ModalOptions) => ModalConfirm’, but here has type ‘ElMessageBoxShortcutMethod’.Subs
-
错误信息:
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’.
-
简单说下
通常vue项目只会用到一个ui库,但是往往会有一些特殊场景一个ui库不满足我们业务场景,我工作中的项目是ts版本的, 使用到了ant-design-vue(全局引入)和element-ui(按需加载), 按需加载使用了cascader(级联选择框)费劲辛苦的度娘以及谷歌了好多解决方案, 没有十全十美的能解决这个问题, 既需要能本地ts编译不报错, 还需要能npm build能打包, 而且ant-design-vue还要和element-ui 不能互相影响, element-ui最好还要按需加载, 挺折磨人的呀
没事, 编程就是要稳住心态细细考究, 终于功夫不负有心人, 最终完全符合了我们项目的要求
-
解决方案
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>
更多推荐
所有评论(0)