Vue自动批量注册全局组件

使用到的方法

webpack提供的require.context()进行批量获取组件对象、Vue.use()进行注册

实现步骤

在src/components下创建index.js，使用export default {} 将配置暴露出去

export default {
  install(Vue) {
    // 使用webpack的方法
    // require.context(文件路径, 是否深层次查找, 正则表达式)
    const requireComponent = require.context('./', true, /\.vue$/)
    // requireComponent.keys() 会找到各个组件文件的路径 包含在一个数组里面
    requireComponent.keys().forEach((ele) => {
      // requireComponent(ele).default 会得到组件对象 需要给组件设置name
      const moduleObj = requireComponent(ele).default
      Vue.component(moduleObj.name, moduleObj)
    })
  }
}

require.context()传入三个参数，第一个参数是查找的目标文件路径，第二个参数是是否深层次查找(若深层次查找则会查找目标文件子文件夹里每一个文件),第三个参数是一个正则表达式用于匹配文件。

在main.js中导入，使用Vue.use()进行注册
Vue2

import Vue from 'vue'
import App from './App'
// 使用Vue.use()方法注册全局组件
import plugin from '@/components'
Vue.use(plugin)
new Vue({ render: h => h(App) }).$mount('#app')

Vue3

import { createApp } from 'vue'
import App from './App.vue'
import plugin from '@/components'
createApp(App).use(plugin).mount('#app')