工程化注册Vue全局组件

Q1: 前端工程化注册全局组件

借助webpack的require.context() 来创建模块的上下文，然后实现自动动态require组件。这里以引入全局组件为例。

1、文件目录及命名方式

其中globals文件夹为全局组件存放位置。require,context()在使用时需要定位所在文件夹的位置，建议将全局组件放到一个文件夹下。

global文件夹下存放install.js(用于实现工程化注册全局组件)，以及各全局组件具体实现。

全局组件实现过程中可能会进行进一步拆分，建议分主文件和拆分文件，主文件命名建议：文件夹名称_index.vue，拆分文件命名建议：_功能名称，vue。

主文件命名原因：1) 方便开发工具、控制台定位调试。 2) 本工程化是正则匹配以_index.vue结尾的文件。

拆分文件命名只要不和主文件正则匹配冲突即可。

2、install.vue实现

// 组件名称首字母大写
function toUpperStrStart(str) {
    return str.charAt(0).toUpperCase() + str.slice(1);
}

const globalComponent = require.context('./', true, /\_index.vue$/); // 全局匹配globals文件夹下所有的以_index.vue结尾的文件
const install = Vue => {
    globalComponent.keys().forEach(item => {
        let config = globalComponent(item);
        let { name, __file } = config.default || config;
        if(!name) throw new Error(`组件name属性不存在，请按照格式填写。文件地址:${__file}`)
        Vue.component(toUpperStrStart(name), config.default || config)
    })
}

export default { install }

这里调用Vue.component()需要组件名称name、组件。组件获取直接拿config.default。在name处理上，我们要求组件的name必须存在，如果不存在的话给出错误提示。这里多做了一步处理，强制让name的首字母大写，主要是为了符合组件的命名规范。

然后返回install(),便于main函数值直接Vue.use()调用。

3、main.js调用

import globalComponent from './components/globals/install'
Vue.use(globalComponent);