上期我们说到如何引入引用vue组件及引入组件的步骤：《vue组件化：自定义组件创建并引入和传参》，今天我们说一下，组件过多如何处理，就是下面的这种情况。
我们在引入组件的时候，常见的就是一个import引入一个，例如：

import uiHeader from '../components/header'
import uiBanner from '../components/banner'
import uiCard from '../components/card'
...

但是，如果页面组件多了起来，光组件一行一个就可以显示一页了，很不友好，这时候就需要把组件做个“打包”中间层index.js配置，我们用的时候按需引入就行了，一行解决全部组件的引入。

Vue组件化步骤：

1.组件文件夹components内创建index.js

vue如何按需引入多个组件？-QUI-Notes

2.在index文件里面配置组件各自调用的文件及名称

export { default as uiHeader } from './header.vue'
export { default as uiBanner } from './banner.vue'
export { default as uiCard } from './card.vue'
...

3.页面按需引入

import {uiHeader, uiBanner, uiCard} from '../components'

这样的话，组件化工程就算完成了，页面按需调用即可！拒绝无效代码，做高效分享 —— 我是陈小知。