Vue 组件自动注册

Posted 2021-12-23 __曾经沧海难为水

首先简单介绍一个语法

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