Vue應用有時候元件多了，一個一個註冊引用很麻煩，其實可以把元件資料夾批量註冊，然後按需引用。
首先在元件資料夾裡建立一個 index.js 的檔案，裡面寫掃描此路徑下所有元件的邏輯：

//掃描此資料夾下的所有的`.vue` 檔案，並註冊
const componentsWatcher = scanner => {
  scanner.keys().map(key => {
    let name = scanner(key).default.name
    if (name) {
      Vue.component(name, function(resolve) {
        require([key + ''], resolve)
      })
    }
  })
}
//掃描匹配條件
const vueScanner = require.context(
  '@/components',
  true,
  /^\.\/((?!\/)[\s\S])+\/index\.vue$/
)

//掃描
componentsWatcher(vueScanner)
 

在把 components 資料夾引入到main.js 裡

(() => {
  Promise.all([
    import('@/components'),
    import('./App.vue'),
    import('./router'),
    import('./store')
  ]).then(([{ default: App }, { default: router }, { default: store }]) => {
    new Vue({
      el: '#app',
      router,
      store,
      render: h => h(App)
    })
  })
})()
 

這樣只要把元件放在components資料夾下面，不需要註冊，呼叫的地方按需引用直接呼叫即可：

import { myComponent } from '@/components'