Vue 组件自动注册

首先简单介绍一个语法

require.context()

这是webpack中的一个API，能做到遍历一个文件夹中的指定文件并自动引入

 

现在要实现的也就是： 遍历指定文件的同时将它注册

在main.js中 代码实现：

import Vue from 'vue'

const componentsContext = require.context('./components', true, /index.vue$/)
 // require.context() 第一个参数就是需要注册的组件的位置
componentsContext.keys().forEach(component => {
    // 获取文件中的 default 模块
    const componentConfig = componentsContext(component).default
    Vue.component(componentConfig.name, componentConfig)
　　// componentConfig.name 就是组件名称
})

首先通过 require.context() 获取 ./components 目录下所有文件夹里的 index.vue 文件，然后循环依次读取文件中的 default 模块，并使用组件的 name 做为组件名进行组件注册。

有一点需要注意，因为获取的是目录下的组件名name进行注册， 所以在需要注册的组件中必须声明组件名 name

export default {
    name: '组件名'
}

 

 

require.context