vue同时使用element-ui和mint-ui,.babelrc怎么写

首先安装：

cnpm i element-ui -S  //安装element-ui

cnpm i mint-ui -S  //安装mint-ui

为了减小项目体积，为了引入插件或者组件时会自动引入相应的 CSS 文件，咱们按需引入，所以借助： babel-plugin-component 

肯定得安装：

cnpm i babel-plugin-component -D

然后修改.babelrc：

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

当然这样写还不够，会报错，所以我们还需安装：

cnpm install babel-preset-es2015 --save-dev

还有第二种方法，在网上看的：

再需安装一个： npm install babel-plugin-import --save-dev 

然后再修改：

{
"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"
  }
]

]
}

这个我没试，大家可以试一试，我只是在这里先记录一下。

配置好后，举个例子：

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