[VUE]Babel-plugin-import使用示例：vant按需引入

近两年前端框架火得一塌糊涂，各种第三方开发组件库层出不穷，饿了么的 ElementUI、炫酷的 iView、Bootstrap 家的 VueStrap、有赞家的 Vant 和 Zant。这些框架提供了很优秀的组件和一些设计规范，例如弹框、列表显示器、图片预览浮层、表格等等，而我们在做 SPA 的时候只使用 Vant 的一部分功能，完整引入的话会导致首屏加载时间长，一些不需要使用的东西也在走流量了。Babel-plugin-import 则是从 React 那边过来的一个解决方案，能够按需使用 Vant。

• 安装

npm i babel-plugin-import -D

• 使用 在你的项目根目录里有一个.babelrc的文件，打开以后是这样的

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime"]
}

理所当然，我们在 plugin 里添加 vant 的规则

"plugins": [
	"transform-vue-jsx",
	"transform-runtime",
	["import",{"libraryName":"vant","style":true}]
]

这样就完成了babel-plugin-import中的适配，libraryName是第三方库的名字，style:true代表自动引入css

• 引用组件 假设现在我们只需要 vant 的按钮 Button main.js 里写入

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

  这样就可以单独引入 vant 的按钮了，其他组件也是同理。
• 多个组件同时引入

import {Button, Row, Col, Icon} from 'vant'

我们可以把这些全部写在花括号内

Vue.use(Button).use(Row).use(Col).use(Icon)

Vue.use 可以写成一行 这样就可以按需使用 Vant 的组件了