Vue应用有时候组件多了，一个一个注册引用很麻烦，其实可以把组件文件夹批量注册，然后按需引用。
首先在组件文件夹里创建一个 index.js 的文件，里面写扫描此路径下所有组件的逻辑：
//扫描此文件夹下的所有的`.vue` 文件，并注册
const componentsWatcher = scanner => {
scanner.keys().map(key => {
let name = scanner(key).default.name
if (name) {
Vue.component(name, function(resolve) {
require([key + ''], resolve)
})
}
})
}
//扫描匹配条件
const vueScanner = require.context(
'@/components',
true,
/^\.\/((?!\/)[\s\S])+\/index\.vue$/
)
//扫描
componentsWatcher(vueScanner)
image.png
在把 components 文件夹引入到main.js 里
(() => {
Promise.all([
import('@/components'),
import('./App.vue'),
import('./router'),
import('./store')
]).then(([{ default: App }, { default: router }, { default: store }]) => {
new Vue({
el: '#app',
router,
store,
render: h => h(App)
})
})
})()
这样只要把组件放在components文件夹下面，不需要注册，调用的地方按需引用直接调用即可：
import { myComponent } from '@/components'
