Vue全局组件自动注册

1.在全局组件目录下新建一个index.js文件

export default {
  install(Vue){
    // 使用webpack提供的方法require.context得到一个函数
    //require.context第一个参数是查找路径，第二个参数是否深层查找，第三个参数查找文件后缀。
    const requireComponent = require.context('./', true, /\.vue$/)
    
    // 调用keys方法得到查找到的所有文件路径，返回一个数组
    // 遍历这个数组
    
    requireComponent.keys().forEach(filePath=>{
    
        // 获得组件对象
       const module =  requireComponent(filePath).default
       
       //  注册组件，组件名就是组件的name属性，使用这个方法要保证所有的组件都有name属性
       Vue.component(module.name,module)
    })
  }
}

2. 在main.js中引入这个文件，使用Vue.use注册组件

// 引入文件
import common from '@/components'
// 使用Vue.use注册
Vue.use(common)

使用这种方法注册组件，以后在这个文件夹下创建组件就可以直接使用，一劳永逸~