vue實(shí)現(xiàn)全局組件自動(dòng)注冊(cè),無(wú)需再單獨(dú)引用
更新時(shí)間：2022年03月29日 10:30:16 作者：周郭郭先生
這篇文章主要介紹了vue實(shí)現(xiàn)全局組件自動(dòng)注冊(cè)，無(wú)需再單獨(dú)引用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
vue全局組件自動(dòng)注冊(cè)
1、在components目錄下創(chuàng)建一個(gè)global目錄，里面放置一些需要全局注冊(cè)的組件。
index.js作用只要是引入main.vue，導(dǎo)出組件對(duì)象
2、在components中創(chuàng)建一個(gè)index.js，用來(lái)掃描全局對(duì)象并自動(dòng)注冊(cè)。
3、最后在入口文件main.js中導(dǎo)入這個(gè)index.js中就可以了
4、直接使用
自動(dòng)化注冊(cè)全局組件腳本
今天有一個(gè)idea，vue一些組件，可能會(huì)全局都用到，我覺(jué)得在main.js寫(xiě)
Vue.component(name, instance)
然后很命令式，寫(xiě)著也不好看，想著能夠有一個(gè)函數(shù)可以指定加載比如components下的文件，自動(dòng)完成全局化注冊(cè)，想起來(lái)就很帥
放代碼：
export function autoLoadingGlobalComponent() {
? const requireComponent = require.context(
? ? // 其組件目錄的相對(duì)路徑
? ? '../components',
? ? // 是否查詢(xún)其子目錄
? ? false,
? ? // 匹配vue后綴文件名的文件
? ? /\.vue$/
? )
? // 遍歷獲取到的文件名，依次進(jìn)行全局注冊(cè)
? requireComponent.keys().forEach(fileName => {
? ? // 獲取組件配置(實(shí)例)
? ? const componentConfig = requireComponent(fileName)
? ? // 獲取組件的 PascalCase 命名(eg: MYHeader)
? ? const componentName = _.upperFirst(
? ? ? // 獲取駝峰式命名
? ? ? _.camelCase(
? ? ? ? // 剝?nèi)ノ募_(kāi)頭的 `./` 和結(jié)尾的擴(kuò)展名 eg: ./food-header.vue -> foodHeader
? ? ? ? fileName.replace(/^\.\/(.*)\.\w+$/, '$1')
? ? ? )
? ? )
? ? ? // 全局注冊(cè)組件
? ? Vue.component(
? ? ? componentName,
? ? ? // 如果這個(gè)組件選項(xiàng)是通過(guò) `export default` 導(dǎo)出的，
? ? ? // 那么就會(huì)優(yōu)先使用 `.default`，
? ? ? // 否則回退到使用模塊的根。
? ? ? componentConfig.default || componentConfig
? ? )
? })
}以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue中PC端地址跳轉(zhuǎn)移動(dòng)端的操作方法
最近小編接到一個(gè)項(xiàng)目pc端和移動(dòng)端是兩個(gè)獨(dú)立的項(xiàng)目，兩個(gè)項(xiàng)目項(xiàng)目中的內(nèi)容基本相同，鏈接組合的方式都有規(guī)律可循，接到的需求便是在移動(dòng)端訪問(wèn)pc端的URL連接時(shí)，重定向至移動(dòng)端對(duì)應(yīng)頁(yè)面，下面小編給大家分享實(shí)現(xiàn)過(guò)程，一起看看吧2021-11-11
vue調(diào)試工具沒(méi)有Pinia模塊的簡(jiǎn)單解決辦法
Pinia是Vue的存儲(chǔ)庫(kù),它允許您跨組件/頁(yè)面共享狀態(tài),這篇文章主要給大家介紹了關(guān)于vue調(diào)試工具沒(méi)有Pinia模塊的簡(jiǎn)單解決辦法,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02
由于一些演示需要對(duì)一些簡(jiǎn)單頁(yè)面進(jìn)行配置,由于打包build后的vue項(xiàng)目基本已經(jīng)看不出原樣,因此需要?jiǎng)?chuàng)建一個(gè)文件,并在打包的時(shí)候不會(huì)進(jìn)行編譯,所以文件放在public,下面這篇文章主要給大家介紹了關(guān)于vue引用public目錄下文件的相關(guān)資料,需要的朋友可以參考下2022-08-08
vue項(xiàng)目中跳轉(zhuǎn)到外部鏈接的實(shí)例講解
今天小編就為大家分享一篇vue項(xiàng)目中跳轉(zhuǎn)到外部鏈接的實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
本文主要介紹了如何在vue中使用jsx語(yǔ)法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
這篇文章主要介紹了vue3中element Plus插槽,#default=scope定義了一個(gè)名為 default 的插槽,并將當(dāng)前行的數(shù)據(jù)傳遞給一個(gè)名為 scope 的變量,本文結(jié)合示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-05-05
這篇文章主要為大家詳細(xì)介紹了Vue分頁(yè)組件的實(shí)例代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
vue如何監(jiān)聽(tīng)對(duì)象或者數(shù)組某個(gè)屬性的變化詳解
這篇文章主要給大家介紹了關(guān)于vue如何監(jiān)聽(tīng)對(duì)象或者數(shù)組某個(gè)屬性的變化,在Vue.js中可以通過(guò)watch監(jiān)聽(tīng)屬性變化并動(dòng)態(tài)修改其他屬性的值,watch通過(guò)監(jiān)聽(tīng)器函數(shù)接收新舊值,實(shí)現(xiàn)屬性間的數(shù)據(jù)聯(lián)動(dòng),需要的朋友可以參考下2024-12-12
解決Vue使用swiper動(dòng)態(tài)加載數(shù)據(jù),動(dòng)態(tài)輪播數(shù)據(jù)顯示白屏的問(wèn)題
今天小編就為大家分享一篇解決Vue使用swiper動(dòng)態(tài)加載數(shù)據(jù),動(dòng)態(tài)輪播數(shù)據(jù)顯示白屏的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
axios+Vue實(shí)現(xiàn)上傳文件顯示進(jìn)度功能
這篇文章主要介紹了axios+Vue上傳文件顯示進(jìn)度效果，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04