使用ElementUI库开发Vue插件

背景

公司存在大量子系统，子系统须要接入一个公共的功能，公共的功能由单独的团队维护的，为了节约其余子系统快速接入，因此开发了一个Vue的插件，便于其余系统快速接入。

按需引入ElementUI

1. 安装babel-plugin-component

npm install babel-plugin-component --save-dev
复制代码

2. 配置babel.config.js以下

{
    plugins: [
        [
            "component",
            {
            "libraryName": "element-ui",
            "style": false // 不引入css，手动引入
            }
        ]
    ]
}
复制代码

3. 引入ElementUI组件的JS部分 须要注意的地方，安装你插件的系统可能也使用了ElementUI,为了不冲突，须要修改注册组件的名称

import {
  Button
} from "element-ui";
Vue.component("P" + Button.name, Button);
// 在组件里面这样使用
<template>
<p-el-button></p-el-button>
</template>
复制代码

4. 引入ElementUI组件的CSS部分 须要给ElementUI的CSS一个插件的做用域

// scss
<style lang="scss" >
.plugin-xxx-xxxx {
  @import "element-ui/lib/theme-chalk/button";
}
</style>
复制代码

使用ElementUI可能遇到的问题

elementUI组件的弹框使用了popperjs默认append到body下面了，致使里面的css脱离了插件的做用域， 咱们能够经过查看源码, 能够在使用相关组件时， 设置appendToBody:false。

这时候还有个点须要注意， 弹框的position为fixed, fixed在正常状况下是基于窗口进行定位，可是当父节点的css中 transform属性不为none时，弹框基于父节点定位，这也就能解释，为啥popperjs默认append到body下面了，就是为了不这类的定位问题。

第二点须要注意的是，经过上述的方式引入css可能会形成css重复， 同时也可能下面的css样式覆盖上面的css,形成页面布局出错， 解决重复的css，同时压缩css能够按照下面的方式解决

npm install cssnano --save-dev
复制代码// postcss.config.js module.exports = { plugins: { 'cssnano': require('cssnano')({ // 引入element css致使重复的css,使用cssnano去除重复的css preset: 'default', }) } } 复制代码

解决css样式覆盖，能够参考ElementUI文档，按需引入的引入顺序。