使用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文檔，按需引入的引入順序。