在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)
})