[Vue]强迫症发做，我是如何注册全局组件的？

前言

• 这两天看了一篇关于搭建vue模板的~很nice的文章，有不少自动化的操做，心想跟着大佬实践一波
• 不料在玩耍全局组件的时候，诱发了强迫症，具体通过以下：

1. 常规操做

定义全局组件一般会在src目录下建立一个components文件夹；而后在components目录下建立index.js文件用于全局注册；建立global文件夹用于存放全局组件

在全局组件中一般也会建立一个main.vue文件用于定义组件，建立一个index.js用于引入组件和对外暴露组件。如图：

全局注册代码以下：

import Vue from 'vue'

// 扫描global 目录下.js结尾的文件，并扫描子文件夹
const componentsContext = require.context('./global', true, /\.js$/)

// 枚举componentsContext对象
componentsContext.keys().forEach(component => {
  const componentConfig = componentsContext(component)

  // 兼容 import export 和 require module.export 两种规范
  const ctrl = componentConfig.default || componentConfig
  Vue.component(ctrl.name, ctrl.main)
})
复制代码

2. 优化操做

当时以为每次都须要建立一个index.js文件，而且里面只有两行代码，因而就想能不能把index.js文件去掉。目录变成这样：

全局注册代码以下：

import Vue from 'vue'

// 扫描当前目录下.vue结尾的文件，并扫描子文件夹
const componentsContext = require.context('./', true, /\.vue$/)

// 枚举componentsContext对象组
componentsContext.keys().forEach(component => {
  const componentConfig = componentsContext(component)

  // 文件名做组件名
  // component --> ./HeaderBar/main.vue
  let name = component.replace('./', '').replace('/main.vue', '')
  
  // 兼容 import export 和 require module.export 两种规范
  const ctrl = componentConfig.default || componentConfig
  Vue.component(name, ctrl)
})
复制代码

后记

但愿文章对你们有启发，感谢点个赞吧~

另外，送一波福利，公司校招启动，2020界的同窗能够点进来获取内推，早就是优点！