VUE项目中同时引入Antd 和ElementUI 组件重名样式异常解决方案

公司Vue项目中根据需求同时引入了Antd 和 ElementUI 导致部分地方组件使用Antd的$confirm 和$message组件时，由于elementUI中也存在同名的组件，导致页面样式异常。

 

解决方案1：给antd的组件改名

Vue.use(Antd)
Vue.prototype.$antdconfirm = Vue.prototype.$confirm

使用的时候：

this.$antdconfirm({....

解决方案2：按需引用

将你需要使用elementUi 的组件提前抽取到一个单独js文件中去

这里是抽取的elementUI的ColorPicker组件

import{
    ColorPicker
} from 'element-ui'
const element = {
    install:function (Vue) {
        Vue.use(ColorPicker)
    }
}
export default elementColorPicker

在main.js中引入

import elementui from './utils/elementColorPicker'

Vue.use(elementui)

使用confirm的时候正常使用即可

this.$confirm({....