上期我们说到如何引入引用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-Note

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'

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