Vant 按需引入不要太好用

1,650 阅读1分钟

自动按需引入组件

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

npm i babel-plugin-import -D

2、babel 7 在babel.config.js中配置

module.exports = { plugins: [ ['import', { libraryName: 'vant', libraryDirectory: 'es', style: true }, 'vant'] ] }

3、在src/components下新建vant.js文件,具体代码如下:

`import { Tabbar, TabbarItem, Button } from 'vant' let vantUIs = [Tabbar, TabbarItem, Button]

export default { install (Vue) { vantUIs.forEach(vantUI => [ Vue.component(vantUI.name, vantUI) // Vue.use(vantUI) // 也可以使用 Vue.use() ]) } }`

4、在main.js中引入src/components/vant.js:

import vant from './components/vant' Vue.use(vant)

5、页面使用组件:

<van-button type="default">默认按钮</van-button> 默认按钮