vue2 项目组件全局批量注册

在一个项目中，对于一些基础的通用组件（比如样式统一的表单元素等），频繁的引入会增大开销，所以需要在项目初始化的时候将这些基础组件进行批量注册。

代码实现

1. 首先需要获取基础组件对应文件夹下面的所有组件名，可以通过 require.context() 获取 require.context() 只有 vue-cli3.0 以上支持或者项目中使用了webpack

// global.js

// 获取组件模块名数组
function getModules () {
  const components = require.context(
      '../components',  // 需要获取的文件夹路径（相对路径，绝对路径都可以）
      false,            // 是否遍历子文件夹
      /\w+.(vue|js)$/   // 通过reg表达式匹配符合条件的文件
  )
  
  console.log(components.keys()) // 控制台输出 ["./BaseInput.vue", "./BaseTable.vue"]
  return components
}

2. 需要对获取到的组件名进行处理，需要处理成大驼峰式 该方法可自行修改，并不适用每一个项目

// global.js

// 修改组件命名
function changeComponentsName (string) {
  const nameArr = /\/.\*./g.exec(string) // 查找'/xxx.'的字符串
  const temp = nameArr[0].substring(1, nameArr[0].length - 1).split('')
  temp[0] = temp[0].toUpperCase()
  return temp.join('')
}

3. 注册组件

// global.js

import Vue from 'vue'

// 注册组件
function installComponents () {
  const componentsList = getModules()
  componentsList.keys().forEach(name => {
    const componentsConfig = componentsList(name)
    Vue.component(changeComponentsName(name), componentsConfig.default || componentsConfig)
  })
}

export default {
  installComponents
}

4. 在main.js中引入使用

// main.js

import Vue from 'vue'
import App from './App.vue'
import plugins from '@/config/global'

// 注册需要放在实例化组件之前
plugins.installComponents()

new Vue({
  render: h => h(App)
}).$mount('#app')