四步实现全局批量注册组件

• 首先需要用到webpack中 require.context()方法,它是webpack提供的一个自动导入的API

• require.context('./',true,/\.vue$/)需要传入三个参数

  • directory {String} -读取文件的路径
  • useSubdirectories {Boolean} -是否遍历文件的子目录
  • regExp {RegExp} -匹配文件的正则

• require.context执行后返回的是一个函数并且这个函数有3个属性,这里我们就用keys()

  • resolve {Function} -接受一个参数request,request为文件夹下面匹配文件的相对路径
  • keys {Function} -返回匹配成功组件相对路径组成的数组
  • id {String} -执行环境的id,返回的是一个字符串 我们看看调用keys()打印的结果

• 这里声明一个变量requireComponent接收这个函数,传入一个刚拿到的组件相对路径作为参数,返回的结果是一个模块对象

• 通过.default方法就可以拿到组件对象

• 然后通过Vue.component()就可以实现组件注册,

废话不多说上代码

四步

1.需要在components文件中新建一个 index.js文件

2.导入vue import Vue from 'vue'

3.使用require.context()方法

const requireComponent= require.context('./',true,/\.vue$/) 

requireComponent.keys().forEach((item)=>{ 

  const componentObj=requireComponent(item).default
  
  Vue.component(componentObj.name,componentObj) 
})

4.在min.js中导入index.js import '@/components/index.js'