vue实现整体注册组件

import Vue from 'vue'
//  使用的是webpack require.context(路径【表示公共的组件的目录】,文件深入循环查找【bool】,正则【最终要使用的组件】 )
const requireComponent = require.context('./', true, /.vue$/)
console.log(requireComponent.keys(), 3344222)
//  输出得到的是一个数组包含了所有暴露出来的文件名
requireComponent.keys().forEach((item) => {
  // console.log(requireComponent[item], 77)  //  ['./bread.vue', './pubArt.vue', './qq/q.vue']
  /* 获取的是 每一个组件暴露出来的对象 */
  const defaultObj = requireComponent(item).default
  Vue.component(defaultObj.name, defaultObj)
})

最后main.js中导入

export default {

  install(Vue){

    const requireComponent=require.context('./',true,/.vue$/)

      requireComponent.keys().forEach(item => {

          //  注册  Vue.component('组件名',组件对象)

          var  defaultCom=requireComponent(item).default

          Vue.component(defaultCom.name,defaultCom)

    });

  }

}
最后在main.js中导入
import plugins from './components'
//Vue.use(plugins)

完成以上步骤后当前查找路径下的所有组件都能自动注册

自动注册的注意点:必须给每个组件设置name属性