在Vue中使用babel-plugin-component插件以实现按需导入Mint UI的组件

在使用Mint UI开发时 若导入全部Mint UI 则文件会比较大
为进行优化 可按需导入Mint Ui的组件
只导入所需要的组件

效果杠杠滴！

全部引入：

按需引入：

可通过babel-plugin-component插件以实现按需导入

首先 安装babel-plugin-component：

npm install babel-plugin-component -D

然后 在Babel的配置文件.babelrc里添加一个组件：

(官网的竟然是错的…多了一对括号 “[ ]” )

["component", {
          "libraryName": "mint-ui",
          "style": true
        }
      ]

例如：

{
    "presets": ["@babel/preset-env"],
    "plugins": ["@babel/plugin-transform-runtime","@babel/plugin-proposal-class-properties",["component", {
          "libraryName": "mint-ui",
          "style": true
        }
      ]]
}

然后 在main.js里导入需要的组件：

// 按需导入Mint UI组件(这里以Button组件作为示例)
import { Button } from "mint-ui"

// 使用Vue.component注册组件
Vue.component("mybtn",Button) // component()第一个参数是组件名 可自定义

最后 就是在页面中使用了：

标签名就是在导入的时候 在component()方法里传入的第一个参数

<mybtn type="danger" size="large" @click="show">button</mybtn>

若要使用默认标签名 则传入组件名.name即可

例如：

Vue.component(Button.name,Button)

---