參考官網(wǎng)：https://cn.vuejs.org/v2/guide/components-registration.html

在日常開發(fā)中，有一些組件是比較常用，但是為了避免在開發(fā)過程中不停地引入，或者在main.js中注冊，，或者每添加一個(gè)組件就需要手動(dòng)注冊一次。則直接進(jìn)行自動(dòng)化全局注冊。

自動(dòng)化全局注冊，官網(wǎng)上都詳細(xì)的說明，以下是自己官網(wǎng)的說明基礎(chǔ)上進(jìn)行了一個(gè)demo開發(fā)實(shí)例：

在src下新建一個(gè)components文件夾，用于存放組件。并新建一個(gè)用于存放需要自動(dòng)化全局注冊的組件，例如base。

// 基礎(chǔ)組件的自動(dòng)化全局注冊import Vue from ’vue’const requireComponent = require.context( // 其組件目錄的相對路徑 ’./’, // 是否查詢其子目錄 true, // 匹配基礎(chǔ)組件文件名的正則表達(dá)式 /.vue$/ ) requireComponent.keys().forEach(fileName => { // 獲取組件配置 const componentConfig = requireComponent(fileName) // 全局注冊組件 Vue.component(componentConfig.default.name, // 此處的name,是組件屬性定義的name// 如果這個(gè)組件選項(xiàng)是通過 `export default` 導(dǎo)出的，// 那么就會(huì)優(yōu)先使用 `.default`，// 否則回退到使用模塊的根。componentConfig.default ) })

以上代碼需要解釋的地方：

1、匹配基礎(chǔ)組件文件名的正則表達(dá)式，此處需要根據(jù)實(shí)際的組件名稱和規(guī)則進(jìn)行配置；

2、componentConfig.default.name此處用到的，是表示組件的名稱，并不是固定的寫法。可以用不同的寫法來表示組件名稱，例如可以直接解析fileName得出文件夾的名稱作為組件名稱也是可以的。componentConfig.default.name中的name，來自于組件定義的時(shí)候頁面的name。若頁面沒有定義name，則報(bào)錯(cuò)。

由于全局注冊的行為必須在根 Vue 實(shí)例 (通過 new Vue) 創(chuàng)建之前發(fā)生。

// 基礎(chǔ)組件的自動(dòng)化全局注冊。全局注冊的行為必須在根 Vue 實(shí)例 (通過 new Vue) 創(chuàng)建之前發(fā)生import ’./components/base/index’

頁面效果如下示：

以上就是vue 實(shí)現(xiàn)基礎(chǔ)組件的自動(dòng)化全局注冊的詳細(xì)內(nèi)容，更多關(guān)于vue 組件全局注冊的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章！