在使用vue構建專案的過程中，我們會設定一些通用的元件，他可能只包含了一個按鈕或者其他的一個小功能，但是會被我們在不同的元件頁面頻繁呼叫。此時若是每一個元件頁面都進行引用，將會有很多重複冗雜的程式碼，可以改為全域性註冊。具體如下：

1. 將這些通用基礎元件放置在同一個資料夾下：如 components/baseComponents/

2. 在應用入口檔案中全域性匯入（如：main.js），以下是官方示例程式碼，稍微做了修改：

// 全域性匯入元件
const requireComponent = require.context(
  // 其元件目錄的相對路徑
  './components/baseComponents',     
  // 是否查詢其子目錄
  false,                      
  // 匹配基礎元件檔名的正則表示式, 這裡可以匹配的檔名為BaseXxxx.vue格式
  /Base[A-Z]\w+\.(vue|js)$/   
)

requireComponent.keys().forEach(fileName => {
  // 獲取元件配置
  const componentConfig = requireComponent(fileName)

  // 獲取元件的 PascalCase 命名
  const componentName = upperFirst(
    camelCase(
      // 剝去檔名開頭的 `'./` 和結尾的副檔名
      fileName.replace(/^\.\/(.*)\.\w+$/, '$1')
    )
  )

  // 全域性註冊元件
  Vue.component(
    componentName,
    // 如果這個元件選項是通過 `export default` 匯出的，
    // 那麼就會優先使用 `.default`，否則回退到使用模組的根。
     componentConfig.default || componentConfig
  )
})
 

注意：上面這段程式碼必須放在 new Vue() 之前。

3. 在相應的元件頁面直接使用註冊好的全域性元件：

<base-xxxx :title="'自動化全域性註冊基礎元件'"></base-xxxx>