vue?require.context()的用法實(shí)例詳解
更新時(shí)間：2023年04月06日 10:01:59 作者：白嫖leader
require.context是webpack提供的一個(gè)api,通常用于批量注冊(cè)組件,下面這篇文章主要給大家介紹了關(guān)于vue?require.context()用法的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
require.context()的介紹
我們可以在控制臺(tái)中打印require，可見require其實(shí)就是就是一個(gè)函數(shù)
我們可以打印require.prototype，查看他身上都有什么方法，都要傳入哪些參數(shù)
console.log(require.prototype);
require.context參數(shù)介紹
require.context(directory,useSubdirectories,regExp)
- directory:表示檢索的目錄
- useSubdirectories：表示是否檢索子文件夾
- regExp:匹配文件的正則表達(dá)式,一般是文件名
例如 require.context(“@/views/components”,false,/.vue$/)
用法一：在組件內(nèi)引入多個(gè)組件
核心代碼如下
const path = require("path")
const files = require.context("@/views/00-99/requireContext/components", false, /\.vue$/)
const modules = {}
files.keys().forEach((key) => {
const name = path.basename(key, ".vue")
modules[name] = files(key).default || files(key)
})
console.log(modules)
export default {
components: modules,
}案例如下：
代碼目錄結(jié)如下（這個(gè)看起來可能比較亂，先將就一下吧）：
有兩個(gè)將會(huì)被用到的組件：
我們主要關(guān)注requireContext文件夾里面的內(nèi)容即可
比如說現(xiàn)在有十好幾個(gè)組件在components文件夾里，這些組件將要被引入02.vue中進(jìn)行使用，我們不想使用import一個(gè)一個(gè)的進(jìn)行引入，那么這個(gè)時(shí)候就可以使用require.context了，
代碼如下：
index.js（這里指的是requireContext目錄下的index.js）
const path = require("path")
const files = require.context("@/views/00-99/requireContext/components", false, /\.vue$/)
const modules = {}
files.keys().forEach((key) => {
const name = path.basename(key, ".vue")
modules[name] = files(key).default || files(key)
})
console.log(modules)
export default {
components: modules,
}02.vue
<template>
<div>
<COMA />
<COMB />
</div>
</template>
<script>
import mycomponents from "./index"
console.log(mycomponents)
export default {
components: {
COMA: mycomponents.components.zujianA,
COMB: mycomponents.components.zujianB,
},
}
</script>
<style></style>最終的效果如下;
用法二：在main.js中引入大量公共組件
下面的代碼都是在main.js，也就是項(xiàng)目的入口文件中寫的，在這個(gè)地方將組件進(jìn)行一次性的全局注冊(cè)，這么多的代碼寫在main.js中可能顯得比較累贅，我們也可以使用方法三（Vue插件），使得代碼看起來比較簡(jiǎn)介一些。
import Vue from 'vue'
// 自定義組件
const requireComponents = require.context('../views/components', true, /\.vue/)
// 打印結(jié)果
// 遍歷出每個(gè)組件的路徑
requireComponents.keys().forEach(fileName => {
// 組件實(shí)例
const reqCom = requireComponents(fileName)
// 截取路徑作為組件名
const reqComName =reqCom.name|| fileName.replace(/\.\/(.*)\.vue/,'$1')
// 組件掛載
Vue.component(reqComName, reqCom.default || reqCom)
})
用法三：使用插件注冊(cè)全局組件
我們可以新建一個(gè)js文件，使用插件的方式進(jìn)行一次性的全局注冊(cè)
/*
所有在./components目錄下的.vue組件自動(dòng)注冊(cè)為全局組件
以<mc-***></mc-***>為組件標(biāo)簽名，***是組件的.name
*/
const requireContext = require.context('../components', true, /\.vue$/)
const requireAll = context => context.keys().map(context)
console.log(requireContext)
console.log(requireAll(requireContext))
export default (Vue) => {
requireAll(requireContext).forEach(item => {
Vue.component(`vc-${item.default.name}`, item.default)
})
}
用法四：引入vuex的module
app.js與user.js是兩個(gè)模塊，將來都需要被引入到index.js中進(jìn)行使用
index.js代碼(modules目錄下的)
import Vue from "vue"
import Vuex from "vuex"
// 省去了一大堆的import
// import app from "./modules/app"
// import user from "./modules/user"
import getters from "./getters"
Vue.use(Vuex)
const files = require.context("./modules", false, /\.js$/)
console.log("------------")
console.log(files.keys())
console.log("------------")
const modules = {}
files.keys().forEach((key) => {
modules[key.replace(/(\.\/|\.js)/g, "")] = files(key).default
})
console.log("------------")
console.log(modules)
console.log("------------")
export default new Vuex.Store({
// 省去了手動(dòng)注冊(cè)
// modules: {
// app,
// user,
// },
modules: { ...modules },
getters,
})
用法五：引入項(xiàng)目中所有的svg文件
const requireContext = require.context('./svg', false, /\.svg/)
const requireAll = context => context.keys().map(context)
requireAll(requireContext)
用法六：利用require.context遍歷目錄所有的圖片
<template>
<div id="app">
<li v-for="(img, index) in images" :key="index">
<p>img: {{ img }}</p>
<img :src="imgUrl(img)" alt="" />
</li>
</div>
</template>
<script>
const req = require.context("@/assets/images", false, /(\.jpg|\.gif)$/)
export default {
name: "App",
data() {
return {
images: [],
}
},
created() {
this.images = req.keys()
},
methods: {
imgUrl(path) {
return req(path)
},
},
}
</script>
<style>
img {
height: 30px;
}
</style>
總結(jié)
到此這篇關(guān)于vue require.context()用法詳解的文章就介紹到這了,更多相關(guān)require.context()用法詳解內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue3源碼分析偵聽器watch的實(shí)現(xiàn)原理
watch?的本質(zhì)就是觀測(cè)一個(gè)響應(yīng)式數(shù)據(jù)，當(dāng)數(shù)據(jù)發(fā)生變化時(shí)通知并執(zhí)行相應(yīng)的回調(diào)函數(shù)。watch的實(shí)現(xiàn)利用了effect?和?options.scheduler?選項(xiàng)，這篇文章主要介紹了Vue3源碼分析偵聽器watch的實(shí)現(xiàn)原理,需要的朋友可以參考下2022-08-08
Vue-admin-template?添加、跳轉(zhuǎn)子頁面問題
這篇文章主要介紹了Vue-admin-template?添加、跳轉(zhuǎn)子頁面問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
使用Vue.js和Flask來構(gòu)建一個(gè)單頁的App的示例
本篇文章主要介紹了使用Vue.js和Flask來構(gòu)建一個(gè)單頁的App的示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03
vue-cli3單頁構(gòu)建大型項(xiàng)目方案
這篇文章主要介紹了vue-cli3單頁構(gòu)建大型項(xiàng)目方案，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
這篇文章主要給大家介紹了關(guān)于Vue數(shù)據(jù)雙向綁定的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11
這篇文章主要介紹了vue如何將字符串的一部分處理為html文檔并渲染到頁面，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
基于Vue開發(fā)一個(gè)很火的卡片動(dòng)畫效果
這篇文章主要為大家詳細(xì)介紹了如何基于Vue開發(fā)一個(gè)很火的卡片動(dòng)畫效果,大致包含兩個(gè)效果,光的跟隨效果還有卡片傾斜像?3D?的效果,感興趣的可以了解一下2024-02-02
Vue項(xiàng)目中Api的組織和返回?cái)?shù)據(jù)處理的操作
這篇文章主要介紹了Vue項(xiàng)目中Api的組織和返回?cái)?shù)據(jù)處理的操作，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-11-11
這篇文章主要給大家介紹了關(guān)于vue如何批量引入組件、注冊(cè)和使用的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
vue2.* element tabs tab-pane 動(dòng)態(tài)加載組件操作
這篇文章主要介紹了vue2.* element tabs tab-pane 動(dòng)態(tài)加載組件操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07