在项目中如何批量注册通用组件呢？

如何批量注册组件呢？

平时在开发中若想使用组件，是采用import xxx from 'xxx' 这种形式引入所需的组件，然后注册使用组件，这样花费时间也枯燥乏味， 为了解决这一痛点，我们可以采用批量注册组件，减少这一繁琐的操作

1. 在component目录下放公共组件（一般分业务组件和通用组件），一般会把通用组件进行批量注册，这样就方便直接使用

// library/index.js
// require.context 这个方法是webpack 的功能，它有4个参数:
// (1) 要索的目录（路径）
// (2) 是否匹配子级 
// (3) 匹配文件的正则表达式,一般是文件名
// (4) 加载模式，同步/异步
const reqCom = require.context('./', false, /^\.\/yb-.*\.vue$/)

export default {
  // install 有两个参数
  // 第一个是Vue 的构造器， 第二个参数是一个可选的选项对象
  install(Vue, options) {
    // 根据keys 批量注册
    if(install.installed) return 
    install.installed
    reqCom.keys().forEach(key => {
      // 导入组件
      const config = reqCom(key)
      // console.log(config)
      const componentName = config.default.name
      // 进行注册
      Vue.component(componentName, config.default || config)
    })
  }
  
  // 环境检查， 确保 vue的环境
  if(typeof  window !== 'undefined'  && window.Vue ) {
      install(window.Vue)
  }
}

2. 然后在main.js文件中注册

import Vue from 'vue'
// 导入自己UI组件库
import UI from '@/components/library'
// ...


Vue.use(UI)

以默认配置为优先（容错处理），以用户配置为覆盖（健壮性， 可扩展性 ）