自动按需引入组件
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>
默认按钮