如何全局一次性注册公共组件

注册全局公共组件

import Vue from 'vue'

const requireComponent = require.context(
  // 组件的相对路径
  './',
  // 是否查询其子目录
  true,
  // 匹配基础组件文件名的正则表达式， 这里匹配文件名为xxx.vue格式
  /index.vue$/,
  'lazy' //懒加载注册
)


requireComponent.keys().forEach((fileName) => {
 
  // 获取组件配置
  const componentConfig = requireComponent(fileName)
  let componentName = fileName.replace(/^\.\//, '').replace(/\/index.vue$/, '')
  // 剥去文件名开头的 `./` 和结尾的扩展名  eg: ./food-header.vue -> foodHeader
  if (componentName.includes('/')) {
    const len = componentName.split('/').length
    componentName = componentName.split('/')[len - 1]
  }

  Vue.component(
    componentName,
    // 如果这个组件选项是通过 `export default` 导出的，
    // 那么就会优先使用 `.default`，否则回退到使用模块的根。
    () => componentConfig.default || componentConfig
  )
})

或者

main.js

import headerInfo from './headerInfo.vue'

export default {
  component: headerInfo,
  componentName: '头部信息'
}

index.js

import Vue from 'vue'
const requireComponent = require.context('./', true, /main.js$/)
const widgetsList = []

function requireComponentFunc(require) {
  require.keys().forEach((fileName) => {
    const componentInfo = require(fileName).default
    widgetsList.push(componentInfo) // 可以获取到所有注册对象的list 外部注册
    // componentInfo.component.name, componentInfo.component
    Vue.component(
      componentInfo.component.name, componentInfo.component
    )
  })
  return widgetsList
}

requireComponentFunc(requireComponent)

export default widgetsList