vue中实现组件自动化全局注册

你是否有这样的烦恼，在vue中写了很多自己的组件，不论是基础组件还是业务组件，想在其他组件中引用，就必须要import的方式引进来，例如

// 引入
import ImageBotton from './Image-botton.vue'
export default {
  component: {
    ImageBotton
  }
}

// 使用

<Image-botton><Image-botton/>

一个两个还好，项目大了就会麻烦起来了，而且需要修改的话，也需要每个里面都去对应一遍。现在这个时代，时间就是金钱，开发效率是第一位，有些工作就不需要重复无意义的进行。
那么组件的全局注册就体现出来他的优势了。

const requireComponent = require.context(
  // 其组件目录的相对路径
  '@/components/',
  // 是否查询其子目录
  true,
  // 匹配基础组件文件名的正则表达式
  /\.(vue|js)$/
);
requireComponent.keys().forEach(fileName => {
  // 获取组件配置
  const componentConfig = requireComponent(fileName);
  // 获取组件的命名(可以根据自己项目的实际情况进行修改)
  const componentName = fileName.replace(/^\.\//, '').replace(/\/\index.vue$/, '');
  // 全局注册组件
  Vue.component(
    componentName,
    // 如果这个组件选项是通过 `export default` 导出的，
    // 那么就会优先使用 `.default`，否则回退到使用模块的根。
    componentConfig.default || componentConfig
  );
});

// 引入：无需引入
// 使用：直接在页面中使用
<Image-botton><Image-botton/>

注意：组件的全局自动注册的方法一定要在new Vue之前进行

这里是前端扫地僧，和你一起分享前端的那些事。