在vue項目中同時使用element-ui和mint-ui,的時候，.babelrc配置文件怎么寫

我們安裝vue組件庫的時候，考慮到大小問題，需要根據需要僅引入部分組件

借助 babel-plugin-component，我們可以只引入需要的組件，以達到減小項目體積的目的。

但是在配置  .babelrc 文件的時候，可能會有同時引入兩個ui組件庫該如何實現的疑惑

配置  .babelrc 文件

單獨配置mint-ui的時候

module.exports = {
  presets: [
    '@vue/app', 
    ['es2015', { 'modules': false }]
  ],
  'plugins': [
    [
      'component',
      {
        'libraryName': 'mint-ui',
        'style': true
      }
    ]
  ]
}

單獨配置element-ui的時候

module.exports = {
  presets: [
    '@vue/app', 
    ['es2015', { 'modules': false }]
  ],
  'plugins': [
    [
      'component',
      {
        'libraryName': 'element-ui',
        'styleLibraryName': 'theme-chalk'
      }
    ]
  ]
}

兩個同時使用的時候

第一種方法

• 首先修改 .babelrc 文件

  {
    "presets": [["es2015", { "modules": false }]],
    "plugins": [
      ["component",
        [{
          "libraryName": "mint-ui",
          "style": true
        },
          {
            "libraryName": "element-ui",
            "styleLibraryName": "theme-chalk"
          }]
      ]
    ]
  }
  

• 安裝 babel-preset-es2015

  $ npm install babel-preset-es2015 -D
  

第二種方法

• 在安裝一個

  npm install babel-plugin-import -S
  

• 然后修改

  {
  "presets": [
          ["env", {
            "modules": false,
            "targets": {
              "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
            }
          }],
          "stage-2"
          ],
  "plugins": ["transform-vue-jsx", "transform-runtime",
              ["component", {
                "libraryName": "mint-ui",
                "style":true
              }],
              ["import",
                {
                  "libraryName": "element-ui",
                  "styleLibraryName": "theme-chalk"
                }
              ]
              ]
  }
  

配置好之后引用

main.js 文件

import Vue from 'vue'
import App from './App.vue'
import Element from 'element-ui'
import {Button } from 'mint-ui/lib/button';

Vue.component(Button.name, Button);
Vue.use(Element)



new Vue({
  el: '#app',
  render: h => h(App)
})