vue工程：一劳永逸，解决组件注册问题（全过程）

vue工程中，经常需要使用公共组件，正常的流程就是先import，然后再注册，然后再使用，比较繁琐，一劳永逸解决组件注册问题，只要放在这个文件夹下的所有组件，可以直接通过组件名字进行调用，不需要任何import和注册。

一、再src下新建一个globalComponents文件夹，用来专门存放公共组件，并且再该文件夹下新建global.js文件

//global.js文件
import Vue from 'vue'
 
 
 
function capitalizeFirstLetter(string) {
 
  return string.charAt(0).toUpperCase() + string.slice(1)
 
}
 
 
 
const requireComponent = require.context(
 
  '.', false, /\.vue$/
 
   //找到components文件夹下以.vue命名的文件
 
)
 
 
 
requireComponent.keys().forEach(fileName => {
 
  const componentConfig = requireComponent(fileName)
 
 
 
  const componentName = capitalizeFirstLetter(
 
    fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')
 
    //因为得到的filename格式是: './baseButton.vue', 所以这里我们去掉头和尾，只保留真正的文件名
 
  )
 
 
 
  Vue.component(componentName, componentConfig.default || componentConfig)
 
})

二、main.js文件中引入global.js文件

import './gloalComponents/global';

三、vue文件中直接使用组件名