Vue.js（五）—— Vue基础组件的自动化全局注册

在使用vue构建项目的过程中，我们会设置一些通用的组件，他可能只包含了一个按钮或者其他的一个小功能，但是会被我们在不同的组件页面频繁调用。此时若是每一个组件页面都进行引用，将会有很多重复冗杂的代码，可以改为全局注册。具体如下：

1. 将这些通用基础组件放置在同一个文件夹下：如 components/baseComponents/

2. 在应用入口文件中全局导入（如：main.js），以下是官方示例代码，稍微做了修改：

// 全局导入组件
const requireComponent = require.context(
  // 其组件目录的相对路径
  './components/baseComponents',     
  // 是否查询其子目录
  false,                      
  // 匹配基础组件文件名的正则表达式, 这里可以匹配的文件名为BaseXxxx.vue格式
  /Base[A-Z]\w+\.(vue|js)$/   
)

requireComponent.keys().forEach(fileName => {
  // 获取组件配置
  const componentConfig = requireComponent(fileName)

  // 获取组件的 PascalCase 命名
  const componentName = upperFirst(
    camelCase(
      // 剥去文件名开头的 `'./` 和结尾的扩展名
      fileName.replace(/^\.\/(.*)\.\w+$/, '$1')
    )
  )

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

注意：上面这段代码必须放在 new Vue() 之前。

3. 在相应的组件页面直接使用注册好的全局组件：

<base-xxxx :title="'自动化全局注册基础组件'"></base-xxxx>