vue 實現(xiàn)基礎(chǔ)組件的自動化全局注冊
參考官網(wǎng)：https://cn.vuejs.org/v2/guide/components-registration.html
在日常開發(fā)中，有一些組件是比較常用，但是為了避免在開發(fā)過程中不停地引入，或者在main.js中注冊，，或者每添加一個組件就需要手動注冊一次。則直接進行自動化全局注冊。
自動化全局注冊，官網(wǎng)上都詳細的說明，以下是自己官網(wǎng)的說明基礎(chǔ)上進行了一個demo開發(fā)實例：
1、自定義文件夾：
在src下新建一個components文件夾，用于存放組件。并新建一個用于存放需要自動化全局注冊的組件，例如base。
2、在base文件夾下定義index.js，具體代碼如下示：
// 基礎(chǔ)組件的自動化全局注冊
import Vue from 'vue'
const requireComponent = require.context(
// 其組件目錄的相對路徑
'./',
// 是否查詢其子目錄
true,
// 匹配基礎(chǔ)組件文件名的正則表達式
/\.vue$/
)
requireComponent.keys().forEach(fileName => {
// 獲取組件配置
const componentConfig = requireComponent(fileName)
// 全局注冊組件
Vue.component(
componentConfig.default.name, // 此處的name,是組件屬性定義的name
// 如果這個組件選項是通過 `export default` 導(dǎo)出的，
// 那么就會優(yōu)先使用 `.default`，
// 否則回退到使用模塊的根。
componentConfig.default
)
})
以上代碼需要解釋的地方：
1、匹配基礎(chǔ)組件文件名的正則表達式，此處需要根據(jù)實際的組件名稱和規(guī)則進行配置；
2、componentConfig.default.name此處用到的，是表示組件的名稱，并不是固定的寫法。可以用不同的寫法來表示組件名稱，例如可以直接解析fileName得出文件夾的名稱作為組件名稱也是可以的。componentConfig.default.name中的name，來自于組件定義的時候頁面的name。若頁面沒有定義name，則報錯。
3、在main.js中引入index.js文件
由于全局注冊的行為必須在根 Vue 實例 (通過 new Vue) 創(chuàng)建之前發(fā)生。
// 基礎(chǔ)組件的自動化全局注冊。全局注冊的行為必須在根 Vue 實例 (通過 new Vue) 創(chuàng)建之前發(fā)生 import './components/base/index'
4、直接在需要的地方使用該組件即可
頁面效果如下示：
以上就是vue 實現(xiàn)基礎(chǔ)組件的自動化全局注冊的詳細內(nèi)容，更多關(guān)于vue 組件全局注冊的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了vant中的toast層級改變操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
今天小編就為大家分享一篇vue點擊自增和求和的實例代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要給大家介紹了Vue如何獲取url路由地址和參數(shù)的相關(guān)資料,通過簡單的代碼示例,幫助讀者快速掌握Vue路由的基本用法,需要的朋友可以參考下2023-03-03
Vue3使用Element?Plus實現(xiàn)列表界面的方法步驟
寫后臺管理的時候會有很多列表以及相應(yīng)的條件查詢,下面這篇文章主要給大家介紹了關(guān)于Vue3使用Element?Plus實現(xiàn)列表界面的方法步驟,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了vue移動端項目中如何實現(xiàn)頁面緩存的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
Vue學(xué)習(xí)筆記進階篇之函數(shù)化組件解析
本篇文章主要介紹了Vue學(xué)習(xí)筆記進階篇之函數(shù)化組件探究，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
vue使用iview的modal彈窗嵌套modal出現(xiàn)格式錯誤的解決
這篇文章主要介紹了vue使用iview的modal彈窗嵌套modal出現(xiàn)格式錯誤的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
vue + any-touch實現(xiàn)一個iscroll 實現(xiàn)拖拽和滑動動畫效果
這篇文章主要介紹了vue + any-touch實現(xiàn)一個iscroll實現(xiàn)拖拽和滑動動畫效果，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04
本文主要介紹了Vue中的性能優(yōu)化方案，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
vue中實現(xiàn)拖動調(diào)整左右兩側(cè)div的寬度的示例代碼
這篇文章主要介紹了vue中實現(xiàn)拖動調(diào)整左右兩側(cè)div的寬度的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07