vue如何批量导入一个文件夹下的多个vue component

假如我的代码文件结构如下：
/src
/src/components/
/src/components/a.vue
/src/components/b.vue
/src/App.vue

如果我想在App.vue 中导入/src/component/*.vue 的所有vue component 该如何批量导入呢？ 如果不进行批量导入的话，只能一行一行的import和Vue.component

例如：

import a from '@/components/a.vue'
import b from '@/components/b.vue'

Vue.component("a",a)
Vue.component("b",b)


如果我在components下有几十个component时，就需要写几十个import 和 几十个 Vue.component , 导致我的文件里太多的导入语句。
那我应该如何批量导入呢？

1. 首先创建 /src/components/index.js

import a from './a'
import b from './b'

export default {
a,b
}

2. 在App.vue 中如下代码进行批量导入 (a.vue, b.vue 中均定义了 name 作为我们的component Id)

import testcomponents from '@/components/'

// 批量注册components
Object.keys(testcomponents).forEach(
function importallcomponent(component){
console.log(testcomponents[component])
console.log(testcomponents[component].name)
Vue.component(testcomponents[component].name, testcomponents[component])
}
)

此篇文章已被阅读1865 次