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

      发布在:前端技术      评论:0 条评论

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

npm i babel-plugin-import -D
{
  "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的组件了

Responses