Vue自动注册全局组件

背景

Vue项目中会有很多自己封装的组件，如果每次使用的时候都需要手动引入，那还是很麻烦的。

解决方案

可以基于webpack的require.context来实现自动加载注册的全局功能

创建一个GlobalComponents文件夹，将要注册的全局组件都放在文件夹里，在index.js中写入如下代码。在入口文件main.js中引入即可。

import Vue from 'vue'

function registerAllComponents(requireContext) {
  return requireContext.keys().forEach(comp => {
    const vueComp = requireContext(comp)
    const compName = vueComp.name ? vueComp.name.toLowerCase() : /\/([\w-]+)\.vue$/.exec(comp)[1]
    Vue.component(compName, vueComp.default)
  })
}

registerAllComponents(require.context('./', false, /\.vue$/))

// main.js
import './GlobalComponents'

注意

不要所有组件都全局注册，就注册经常使用体积不大的组件，最好全局组件有统一命名规范。