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