vue 动态模块导入

const path = require('path');
/*
    实际上是 webpack 的方法,vue 工程一般基于 webpack,所以可以使用
    require.context(directory,useSubdirectories,regExp)
    接收三个参数:
        directory：说明需要检索的目录
        useSubdirectories：是否检索子目录
        regExp: 匹配文件的正则表达式,一般是文件名
*/
const modules = {}
const files = require.context('@/components', true, /\.vue$/)
const install = (Vue) => {
    files.keys().forEach(key => {
        let basePath = key.split('/')
        let name = path.basename(key, '.vue')
        // 判断文件夹下是否只有index.vue，如果是index，则name，取文件夹目录名
        name === 'index' ? name = basePath[basePath.length - 1] : ''
        // console.log('name', name)
        modules[name] = files(key).default || files(key)
        if ( modules[name] ) {
            // console.log('modules[name]', modules[name])
            Vue.component(name === 'index' ? name : modules[name].name || name, modules[name])
        }
    })
}

export default {
    install
}