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

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

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

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

[code]// 全局导入组件
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. 在相应的组件页面直接使用注册好的全局组件：

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