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

Life is short , play more!
本文来自lihao's Blog,转载请注明。

假如我的代码文件结构如下:
/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])
}
)


发表评论

电子邮件地址不会被公开。 必填项已用*标注