快捷導(dǎo)航

Vue中使用require.context自動(dòng)引入組件的操作方法

更新時(shí)間：2024年01月06日 15:20:30 作者：鄒榮樂(lè)

require.context?是?webpack?提供的一個(gè)API,用于創(chuàng)建context,即一組具有相同上下文的模塊,使用?require.context?可以方便地加載多個(gè)模塊,并且可以靈活地控制模塊的加載順序和依賴關(guān)系,本文給大家講解Vue中使用require.context自動(dòng)引入組件的方法,感興趣的朋友一起看看吧

require.context (需要vue-cli3+的版本)

require.context(directory, useSubdirectories, regExp)

directory: 要查找的文件路徑
useSubdirectories: 是否查找子目錄
regExp: 要匹配文件的正則

1.在compoents文件下隨便創(chuàng)建index.js文件

const requireComponent = require.context('./', true, /\.vue$/)
const install = (Vue) => {
    if (install.installed) return
    install.installed
    requireComponent.keys().forEach(element => {
        const config = requireComponent(element)
        if (config && config.default.name) {
            const componentName = config.default.name
            Vue.component(componentName, config.default || config)
        }
    });
}
if (typeof window !== 'undefined' && window.Vue) {
    install(window.Vue)
}
export default {
    install
}

2.mian.js引入該js

import install from './compoents'
Vue.use(install)

總結(jié)

我們可以通過(guò)require.context可以自動(dòng)化引入文件。
其實(shí)我們不單單局限于組件，路由內(nèi)，所有模塊文件都是通用的，例如路由，接口封裝模塊，都是可以使用的。

到此這篇關(guān)于Vue中使用require.context自動(dòng)引入組件的方法介紹的文章就介紹到這了,更多相關(guān)Vue自動(dòng)引入組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue-router3.0版本中 router.push 不能刷新頁(yè)面的問(wèn)題
這篇文章主要介紹了vue-router3.0版本中 router.push 不能刷新頁(yè)面的問(wèn)題,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-05-05
vue中@click如何綁定多個(gè)事件
這篇文章主要介紹了vue中@click如何綁定多個(gè)事件問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-11-11
使用Vue3和Vite實(shí)現(xiàn)對(duì)低版本瀏覽器的兼容
在使用Vite和Vue3構(gòu)建的JavaScript項(xiàng)目中,確保對(duì)低版本瀏覽器的兼容性是一個(gè)重要的考慮因素,以下是一些具體的解決方案和步驟,可以幫助你實(shí)現(xiàn)這一目標(biāo),需要的朋友可以參考下
2024-11-11
Vue查詢數(shù)據(jù)并通過(guò)bootstarp?table渲染數(shù)據(jù)
這篇文章主要為大家介紹了Vue查詢數(shù)據(jù)并通過(guò)bootstarp?table渲染數(shù)據(jù)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-04-04
Vite打包優(yōu)化之縮小打包體積實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了使用Vite縮小打包體積如何實(shí)現(xiàn)的示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-01-01
從eleUI的Loading知道了單例模式的用法
這篇文章主要介紹了從eleUI的Loading知道了單例模式的用法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-01-01
Vue.js實(shí)現(xiàn)一個(gè)漂亮、靈活、可復(fù)用的提示組件示例
這篇文章主要介紹了Vue.js實(shí)現(xiàn)一個(gè)漂亮、靈活、可復(fù)用的提示組件示例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。
2017-03-03
vue踩坑記錄之echarts動(dòng)態(tài)數(shù)據(jù)刷新問(wèn)題
這篇文章主要介紹了vue踩坑記錄之echarts動(dòng)態(tài)數(shù)據(jù)刷新問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-07-07
vue+elementUI實(shí)現(xiàn)多文件上傳與預(yù)覽功能實(shí)戰(zhàn)記錄(word/PDF/圖片/docx/doc/xlxs/txt)
這篇文章主要給大家介紹了關(guān)于利用vue+elementUI實(shí)現(xiàn)多文件上傳與預(yù)覽功能的相關(guān)資料,包括word/PDF/圖片/docx/doc/xlxs/txt等格式文件上傳,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-08-08
vue源碼學(xué)習(xí)之Object.defineProperty 對(duì)數(shù)組監(jiān)聽(tīng)
這篇文章主要介紹了vue源碼學(xué)習(xí)之Object.defineProperty 對(duì)數(shù)組監(jiān)聽(tīng)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-05-05