批量自动化注册全局组件(Vue3)

回顾注册全局组件的方法

已知注册全局组件有两种方法：

一种是直接去main.js中引入文件，通过vue.component('组件名'，组件对象)，导入定义的变量名就是组件对象，组件名是组件的name

import Pagetools from '@/components/PageTools'

Vue.component('Pagetools' , Pagetools)

第二种是将要全局注册的全部组件文件导入到同一个index.js文件中，通过install函数进行分别注册，之后将这个index.js文件导入到main.js文件中，通过vue.use挂载到全局,之后如果又有新的全局组件需要注册，直接引入到index.js文件中即可

vue2中install函数的参数是vue,vue3中参数是app！！！！！！

方法2  (index.js文件)

import Components from '@/components/index.js '

Vue.use(Components)      // main.js文件

---

那么有没有什么更简便的方法呢？当然有！

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

②然后 context 函数会返回一个导入函数 importFn，它又一个属性 keys() 获取所有的文件路径

③通过遍历文件路径数组，使用 importFn 根据路径导入组件对象

const importFn = require.context('./', false, /\.vue$/) 

参数：1. 目录 2. 是否加载子目录 3. 加载的正则匹配

批量自动化注册组件：app是vue3中install函数的参数,以下内容就是写在install函数中

遍历操作的内容

需要注意的是，这里注册完成一样是需要将文件导入到main.js文件中，通过Vue.use进行全局挂载

原理就是：当你在mian.js导入，使用Vue.use() (vue3.0 app)的时候就会执行install函数