Vue 全局注册 自定义组件

思路

1. 建立 一个 大文件，里面建立 一个个小文件（文件名格式是 aaa-bbb-ccc, 之后用组件就是 AaaBbbCcc），在小文件都要建一个 index.vue（方便 require.context()引入）
2. 在 main.js 全局引入

核心代码

// ***-components-loader.js
const requireComponent = require.context(
  // 查找文件的相对路径
  './',
  // 是否查找 子文件
  true,
  // 匹配基础组件文件的正则表达式
  /index(.*?)\.(vue)$/ 
)
export default {
  install(Vue) {
    requireComponent.keys().foreach(filename => {
      const componentConfig = requireComponent(filename)
      const componentName = upperFirst(
         camelCase(
            fileName?.split('/')?.[1]
          )
      )
      // 全局注册组件
      Vue.component(
        componentName,
        // 如果这个组件选项是通过 `export default` 导出的，
        // 那么就会优先使用 `.default`，
        // 否则回退到使用模块的根。
        componentConfig.default || componentConfig
      )
    })
  }
}