[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界的同窗能夠點進來獲取內推，早就是優點！