Vue：利用require.context自动注册组件

Webpack中有一个函数

require.context(directory, useSubdirectories = false, regExp = /^\.\//)

  

 

  
1
 

参数：

• directory：要搜索的文件夹目录
• useSubdirectories：是否还应该搜索它的子目录
• regExp：一个匹配文件的正则表达式

自动注册Vue组件（适用于高频组件）

//  global.js文件 Vue.use(global);

function changeStr(str) {
  return str.charAt(0).toUpperCase() + str.slice(1);
}

// 查找同级目录下以vue结尾的组件
const requireComponent = require.context("./", false, /\.vue$/);

// 对外暴露install方法
const install = (Vue) => {
  requireComponent.keys().forEach((fileName) => { let config = requireComponent(fileName); console.log(config); // ./child1.vue 然后用正则拿到child1 let componentName = changeStr( fileName.replace(/^\.\//, "").replace(/\.\w+$/, "") ); Vue.component(componentName, config.default || config);
  });
};

export default {
  // 对外暴露install方法
  install,
};


  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
 

main.js 中注册

Vue.use(global);

  

 

  
1
 

文章来源: pengshiyu.blog.csdn.net，作者：彭世瑜，版权归原作者所有，如需转载，请联系作者。

原文链接：pengshiyu.blog.csdn.net/article/details/113996601