VUE+mint-ui按需引入总结

第一步：安装mint-ui（这里不细说）

第二步；运行npm install babel-plugin-component （文档写的npm install babel-plugin-component -D,）(我按文档知道装了报错，项目无法编译，可能是和版本有关系？？？多次尝试后把-D删掉就可以)

第三部： 修改.babelrc 文件，一般安装在项目根目录下
（我按文档说的修改的内容走报错无法运行，后来发现只需要在.babelrc文件里面的plugin加上以下内容即可）
["component", [ { "libraryName": "mint-ui", "style": true } ] ]

我的最终结果如下：

{
  "presets": [
    ["env", { "modules": false }],
    "stage-2"
  ],
  "plugins": ["transform-runtime"],
  "comments": false,
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": [
        "istanbul" ,
        ["component", [
          {
            "libraryName": "mint-ui",
            "style": true
          }
        ]]
      ]
    }
  }
}

第四部：修改main.js文件
首先，引入使用的组件（以下是我用到的）

//按需引入
import { Button, TabContainer, TabContainerItem, Loadmore , } from 'mint-ui'

然后，声明使用组件（文档说可以写成Vue.use(xxxx)，我这么写报错，具体原因未知，建议用下面的写法）

//按需引入
Vue.component(Button.name, Button);
Vue.component(TabContainer.name, TabContainer);
Vue.component(TabContainerItem.name, TabContainerItem);
Vue.component(Loadmore.name, Loadmore);

第五步：npm run build 运行无报错，成功

附全局引入：（这里多了个CSS文件的引入，按需引入的话这行也要注释掉）

// 全局引入
// import MintUI from 'mint-ui'
// import 'mint-ui/lib/style.css'

// 全局引入
// Vue.use(MintUI)