批量注册全局组件

190 阅读1分钟

先有一个公共组件 PageTools 里面有一个index.vue

在mian.js注册

import PageTools from '@/components/PageTools'
import pluginCom from '@/components'
Vue.use(pluginCom)

在再components里面注册一个index.js作为根

export default {
  install(Vue) {
    /* 函数 */
    var requireComponent = require.context('./', true, /\.vue$/)
    // console.dir(requireComponent.keys(), '数组777');
    requireComponent.keys().forEach((item) => {
      // console.log(requireComponent(item), 6);
      var moduleDefault = requireComponent(item).default
      // console.log(moduleDefault, 88)
      Vue.component(moduleDefault.name, moduleDefault)
    })
  }
}

解释:

 + require.context(参数1,参数2,参数3) 是webpack提供的一个自动导入的API
参数1:加载的文件目录
参数2:是否加载子目录
参数3::正则,匹配文件
requireComponent:返回值:导入函数 fn
keys() 获取读取到的所有文件列表

在那个组件用 就调用

<PageTools></PageTools>