动态引入全局组件

大致思路: 

　　通过  webpack中require.context的作用 读取到 指定文件夹下文件名 , 及export default 出的内容 , 然后在vue全局注册

 

这篇讲的还行吧webpack中require.context的作用

目录结构

 

 

全局组件和global.js 在同级目录下

 bus.js可以忽略

Global.vue 为全局组件

 

global.js

import Vue from "vue";
//首字母大写
function changeStr(str) {
    return str.charAt(0).toUpperCase() + str.slice(1)
}
//require.context()=>动态引入文件
//1.路径
//2.是否匹配子级文件
//3.规则 

const requireComponent = require.context('.', false, /\.vue$/); //可以匹配指定基础组件文件名的正则表达式

requireComponent.keys().forEach(fileName => {
    const config = requireComponent(fileName);
    console.log(fileName)
    const componentName = changeStr(
        fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')
    )
    console.log(config.default)
    Vue.component(componentName, config.default || config)
})

 

然后再main.js中引入

import './common/global.js'

 

然后就可以在全局使用 Global.vue