vue實現(xiàn)全局組件自動注冊,無需再單獨引用
更新時間：2022年03月29日 10:30:16 作者：周郭郭先生
這篇文章主要介紹了vue實現(xiàn)全局組件自動注冊，無需再單獨引用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue全局組件自動注冊
1、在components目錄下創(chuàng)建一個global目錄，里面放置一些需要全局注冊的組件。
index.js作用只要是引入main.vue，導(dǎo)出組件對象
2、在components中創(chuàng)建一個index.js，用來掃描全局對象并自動注冊。
3、最后在入口文件main.js中導(dǎo)入這個index.js中就可以了
4、直接使用
自動化注冊全局組件腳本
今天有一個idea，vue一些組件，可能會全局都用到，我覺得在main.js寫
Vue.component(name, instance)
然后很命令式，寫著也不好看，想著能夠有一個函數(shù)可以指定加載比如components下的文件，自動完成全局化注冊，想起來就很帥
放代碼：
export function autoLoadingGlobalComponent() {
? const requireComponent = require.context(
? ? // 其組件目錄的相對路徑
? ? '../components',
? ? // 是否查詢其子目錄
? ? false,
? ? // 匹配vue后綴文件名的文件
? ? /\.vue$/
? )
? // 遍歷獲取到的文件名，依次進(jìn)行全局注冊
? requireComponent.keys().forEach(fileName => {
? ? // 獲取組件配置(實例)
? ? const componentConfig = requireComponent(fileName)
? ? // 獲取組件的 PascalCase 命名(eg: MYHeader)
? ? const componentName = _.upperFirst(
? ? ? // 獲取駝峰式命名
? ? ? _.camelCase(
? ? ? ? // 剝?nèi)ノ募_頭的 `./` 和結(jié)尾的擴(kuò)展名 eg: ./food-header.vue -> foodHeader
? ? ? ? fileName.replace(/^\.\/(.*)\.\w+$/, '$1')
? ? ? )
? ? )
? ? ? // 全局注冊組件
? ? Vue.component(
? ? ? componentName,
? ? ? // 如果這個組件選項是通過 `export default` 導(dǎo)出的，
? ? ? // 那么就會優(yōu)先使用 `.default`，
? ? ? // 否則回退到使用模塊的根。
? ? ? componentConfig.default || componentConfig
? ? )
? })
}以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要給大家介紹了利用vscode編寫vue簡單配置的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面跟著小編一起來學(xué)習(xí)學(xué)習(xí)吧。2017-06-06
這篇文章主要為大家詳細(xì)介紹了Vue.js實現(xiàn)點擊左右按鈕圖片切換，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了vue 代碼高亮插件全面對比測評的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-03-03
簡單實現(xiàn)vue中的依賴收集與響應(yīng)的方法
這篇文章主要介紹了簡單實現(xiàn)vue中的依賴收集與響應(yīng)的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
這篇文章主要介紹了Vue 按鍵修飾符的相關(guān)資料，vue中新增按鍵修飾符和系統(tǒng)修飾符來處理類似的事件，具體內(nèi)容詳情大家參考下本文2018-05-05
本文主要介紹了vue3+ts實現(xiàn)樹形組件(菜單組件)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
Vue的小伙伴們,困擾大家的IE瀏覽器支持Vue的問題,目前已經(jīng)找到了一個比較好的解決方案,下面這篇文章主要給大家介紹了關(guān)于vue項目兼容IE瀏覽器的教程步驟,需要的朋友可以參考下2023-03-03
這篇文章主要給大家介紹了關(guān)于Vue3安裝dataV報錯問題解決方案的相關(guān)資料,dataV用于大屏展示,個人覺得比echarts簡單很多,需要的朋友可以參考下2023-06-06
VUE實現(xiàn)分布式醫(yī)療掛號系統(tǒng)預(yù)約掛號首頁步驟詳情
這篇文章主要為大家介紹了VUE實現(xiàn)分布式醫(yī)療掛號系統(tǒng)預(yù)約掛號首頁步驟詳情，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-04-04
這篇文章主要介紹了vue、element實現(xiàn)表格表頭縱向顯示方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10