vue项目中使用require.context引入组件_vue.js_

背景

我们在vue项目中，我们可能或有很多的组件需要全局注册，大家有没有遇到这样的烦恼，组件太多，需要一个一个引入注册呢？

require.context 是什么？

require.context 是webpack的api,我们可以通过require.context()函数来创建自己的context。

require.context 的基本用法

语法如下

require.context( directory, (useSubdirectories = true), (regExp = /^\.\/.*$/), (mode = 'sync') );

示例： require.context可以传三个参数：一个要搜索的目录，一个标记表示是否还搜索其子目录， 以及一个匹配文件的正则表达式

require.context("@/views/pageComponents",true,/.vue$/) // 创建出一个context,其中文件来自非pageComponents目录, request以`.vue`文件结尾

注意点

一个 context module 会导出一个（require）函数，此函数可以接收一个参数：request。此导出函数有三个属性：resolve, keys, id。 返回的函数

webpackContext(req) { var id = webpackContextResolve(req); return __webpack_require__(id); }

require.content 的应用场景

案例1

我们在vue项目工程中，封装了很多组件，让后在需要用到的页面需要一个一个引入,

使用方法

const pageComponents = require.context("@/views/pageComponents",true,/.vue$/) export const components={} pageComponents.keys().forEach(item=>{ const name = path.basename(item,".vue") components[name] = pageComponents(item).default })

案例2

加载所有的图片

Image: {{ item }}

到此这篇关于vue项目中使用require.context引入组件的文章就介绍到这了,更多相关vue require.context引入内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！