參考官網：https://cn.vuejs.org/v2/guide/components-registration.html

在日常開發中，有一些元件是比較常用，但是為了避免在開發過程中不停地引入，或者在main.js中註冊，，或者每新增一個元件就需要手動註冊一次。則直接進行自動化全域性註冊。

自動化全域性註冊，官網上都詳細的說明，以下是自己官網的說明基礎上進行了一個demo開發例項：

1、自定義資料夾：

在src下新建一個components資料夾，用於存放元件。並新建一個用於存放需要自動化全域性註冊的元件，例如base。

2、在base資料夾下定義index.js，具體程式碼如下示：

// 基礎元件的自動化全域性註冊
import Vue from 'vue'
const requireComponent = require.context(
// 其元件目錄的相對路徑
'./',// 是否查詢其子目錄
true,// 匹配基礎元件檔名的正則表示式
/\.vue$/
)
requireComponent.keys().forEach(fileName => {
// 獲取元件配置
const componentConfig = requireComponent(fileName)
// 全域性註冊元件
Vue.component(
componentConfig.default.name,// 此處的name,是元件屬性定義的name
// 如果這個元件選項是通過 `export default` 匯出的，
// 那麼就會優先使用 `.default`，
// 否則回退到使用模組的根。
componentConfig.default
)
})

以上程式碼需要解釋的地方：

　　1、匹配基礎元件檔名的正則表示式，此處需要根據實際的元件名稱和規則進行配置；

　　2、componentConfig.default.name此處用到的，是表示元件的名稱，並不是固定的寫法。可以用不同的寫法來表示元件名稱，例如可以直接解析fileName得出資料夾的名稱作為元件名稱也是可以的。componentConfig.default.name中的name，來自於元件定義的時候頁面的name。若頁面沒有定義name，則報錯。

3、在main.js中引入index.js檔案

由於全域性註冊的行為必須在根 Vue 例項 (通過new Vue) 建立之前發生。

// 基礎元件的自動化全域性註冊。全域性註冊的行為必須在根 Vue 例項 (通過 new Vue) 建立之前發生
import './components/base/index'

4、直接在需要的地方使用該元件即可

頁面效果如下示：

以上就是vue 實現基礎元件的自動化全域性註冊的詳細內容，更多關於vue 元件全域性註冊的資料請關注我們其它相關文章！