babel-plugin-import 插件 的使用

     babel-plugin-import   是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式

以Vant 为例：

# 安装 babel-plugin-import 插件
npm i babel-plugin-import -D

// 在 .babelrc 或 babel-loader 中添加插件配置
// 注意：webpack 1 无需设置 libraryDirectory
{
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}

接着你可以在代码中直接引入 Vant 组件，插件会自动将代码转化为按需引入形式

以 Vue-cli为例，在main.js 中 按需引入

import { Button, Cell } from 'vant';
Vue.use(Button);

然后在组件中 直接使用即可

<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="danger">危险按钮</van-button>

Vant ( ˈvænt ) 是有赞前端团队基于有赞统一的规范实现的 Vue 组件库，提供了一整套 UI 基础组件和业务组件。通过 Vant，可以快速搭建出风格统一的页面，提升开发效率。目前已有近50个组件，这些组件被广泛使用于有赞的各个移动端业务中。我们会在此基础上不断完善，开发更多实用的组件。相关链接：https://segmentfault.com/a/1190000011377961

最后 附上 Vant 文档：https://youzan.github.io/vant/#/zh-CN/intro