批量自动注册组件

首先我们得知道为什么需要注册组件?

通常我们注册组件的话, 是因为该组件可能是一个公用组件; 在很多地方会使用到

当我们将一个组件进行注册之后, 我们就可以像使用 html 标签一样; 在全局任何地方都可以使用

手动的注册全局组件:

import XtxBread from './xtx-bread.vue'

export default {
  install (app) {
    app.component('XtxBread', XtxBread)
  }
}

// main.js
import UI from '@/components/library'

createApp(App).use(store).use(router).use(UI).mount('#app')

批量的自动注册组件:

• 主要使用的是 commonJS 中 require 中的一个方法 context
• context 函数的作用使用加载某一个文件夹下面的所有正则匹配通过的文件或子文件
  • 此函是第一个参数是在哪一个路径下面
  • 第二个参数是, 是否加载子文件(布尔值)
  • 第三个参数是, 正则
• context 函数有一个返回值, 返回值是一个导入对象函数(我将它取名为 importFn)
• 在 js 中万物皆对象, imprortFn 这个函数也是一个对象; 它其中有一个方法是 keys
• keys 可以获取加载的所有文件路径(返回值是一个数组)
• 对返回的数据进行遍历, 对每一个加载的组件进行注册即可

// 加载当前文件下面, 以.vue结尾的文件(不包含子文件)
const importFn = require.context('./', false, /\.vue$/)

export default {
  install (app) {
    importFn.keys().forEach(key => {
      // 导入组件
      // importFn(key)将所有已经加载的文件路径进行导入
      // .default是获取组件中export default默认导出的内容
      // 这里的component就相当于导入的组件
      const component = importFn(key).default

      // 注册组件
      app.component(component.name, component)
    })

  }
}