vue批量导入并注册全局组件

最近博主在写大型vue项目的时候，发现有很多地方需要用到重复的组件，但又不想频繁的import再注册
所以就把组件定义为全局组件，但是随着组件数量的越来越多，每写一个组件就要加一个全局注册方法，真的很麻烦！

所以这里写一遍博客专门来记录vue是如何批量导入组件并注册的：

步骤：

• 使用 require 提供的函数 context 加载某一个目录下的所有 .vue 后缀的文件。

• 然后 context 函数会返回一个导入函数 importFn

• 它又一个属性 keys() 获取所有的文件路径

• 通过文件路径数组，通过遍历数组，再使用 importFn 根据路径导入组件对象
  遍历的同时进行全局注册即可

看的是不是有点懵，下面写的具体一点（以vue-cli为例）：

1.首先在项目的components下新建一个文件夹library，然后再library下新建index.js文件

index.js是我们注册的入口文件，下面的vue文件就是我们准备注册的全局组件，按照以往的写法：

import XtxSkeleton from './XtxSkeleton.vue'
import ... from ...
....

export default {
  install (app) {
     app.component(XtxSkeleton.name, XtxSkeleton)
     app.component(XtxMore.name, XtxMore)
     app.component(XtxBread.name, XtxBread)
     app.component(XtxBreadItem.name, XtxBreadItem)
      ...
      ...
    (每写一个组件就要再这里全局注册一下)
}
}

然后再项目的main.js中引入入口文件，并用use方法使用

import  UI from './src/components/library'

Vue.use(UI)

之后就可以再全局直接使用组件而不用导入再注册！

批量导入

首先介绍一些require.context方法：
可以看一下官方文档：https://www.npmjs.com/package/require-context
我这里简单介绍一下：

require.context(directory, useSubdirectories = false, regExp = /^.//)
一共接收三个参数：1.传入搜索的目录 2.一个Boolean值，表示是否加载子目录 3.一个正则表达式

返回值：一个函数，有一个keys属性，这个属性为一个函数，返回值为匹配到的路径数组

这里是不是还是有点懵，下面来改造一个上面的代码：

const importFn = require.context('./', false, /.vue$/)
export default {
  install (app) {
    importFn.keys().forEach(path => {
      const component = importFn(path).default
      app.component(component.name, component)
    })
  }
}

哇，突然代码少了很多，怎么做到的，下面来分析一下：

const importFn = require.context('./', false, /.vue$/)
这段代码表示匹配./路径下，以vue结尾的文件，并且不加载子目录

然后我们打印一下importFn.keys()

看，它是一个数组，里面都是匹配到的路径，然后遍历这个数组
importFn函数接受一个路径，可以读取该路径组件的信息（别忘了后面有个.default）,

最后使用app.component方法注册组件！！！

是不是很好用！以后在这个路径下写的所有vue文件都相当于全局注册了组件，哪里都可以用！

注意

1.注册组件需要用到.name属性，所以每一个需要全局注册的组件，都需要有name属性！
2.本示例中的app是vue3.0的写法，2.0请用vue（其实是一样的）