位置: IT常识 - 正文

require.context()的用法详解

编辑:rootadmin
require.context()的用法详解 require.context()的用法详解🌴require.context()的介绍🌺用法一:在组件内引入多个组件🌼用法二:在main.js中引入大量公共组件🍂用法三:使用插件注册全局组件🌵用法四:引入vuex的module🌳用法五:引入项目中所有的svg文件

推荐整理分享require.context()的用法详解,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

欢迎加入前端学习交流群692081881

🌴require.context()的介绍

我们可以在控制台中打印require,可见require其实就是就是一个函数 我们可以打印require.prototype,查看他身上都有什么方法,都要传入哪些参数

console.log(require.prototype);

require.context参数介绍 require.context(directory,useSubdirectories,regExp)

directory:表示检索的目录useSubdirectories:表示是否检索子文件夹regExp:匹配文件的正则表达式,一般是文件名

例如 require.context(“@/views/components”,false,/.vue$/)

🌺用法一:在组件内引入多个组件

核心代码如下

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,}require.context()的用法详解

案例如下: 代码目录结如下(这个看起来可能比较乱,先将就一下吧): 有两个将会被用到的组件:

我们主要关注requireContext文件夹里面的内容即可 比如说现在有十好几个组件在components文件夹里,这些组件将要被引入02.vue中进行使用,我们不想使用import一个一个的进行引入,那么这个时候就可以使用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,也就是项目的入口文件中写的,在这个地方将组件进行一次性的全局注册,这么多的代码写在main.js中可能显得比较累赘,我们也可以使用方法三(Vue插件),使得代码看起来比较简介一些。

import Vue from 'vue'// 自定义组件const requireComponents = require.context('../views/components', true, /\.vue/)// 打印结果// 遍历出每个组件的路径requireComponents.keys().forEach(fileName => { // 组件实例 const reqCom = requireComponents(fileName) // 截取路径作为组件名 const reqComName =reqCom.name|| fileName.replace(/\.\/(.*)\.vue/,'$1') // 组件挂载 Vue.component(reqComName, reqCom.default || reqCom)})🍂用法三:使用插件注册全局组件

我们可以新建一个js文件,使用插件的方式进行一次性的全局注册

/* 所有在./components目录下的.vue组件自动注册为全局组件 以<mc-***></mc-***>为组件标签名,***是组件的.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是两个模块,将来都需要被引入到index.js中进行使用 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({ // 省去了手动注册 // modules: { // app, // user, // }, modules: { ...modules }, getters,})

🌳用法五:引入项目中所有的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>

本文链接地址:https://www.jiuchutong.com/zhishi/296027.html 转载请保留说明!

上一篇:html/javascript实现简单的上传(html+javascript)

下一篇:情感计算——多模态情感识别(情感计算的应用)

  • 未实际处置资产损失税前扣除金额的分录?
  • 什么是资本利得?
  • 什一税是什么意思?
  • 失业稳岗补贴怎么记账
  • 销售部的招待费计入什么费用
  • 出口退税网上服务中心app
  • 网上报税需要准备什么资料
  • 工资 小数点
  • 增值税专用发票和普通发票的区别
  • 个税手续费返还比例
  • 运输公司赔偿计入什么科目
  • 可供出售债权投资
  • 主营业务收入具体是什么
  • 代办企业开户
  • 试运营和正式运营间隔
  • 劳务派遣工资需要发票吗
  • 残疾人保障金中上年在职职工人数怎么计算
  • 应交税费进项税额在借方说明什么
  • 企业所得税营业收入
  • 企业购买可转债会计分录
  • 商家收白条
  • 如何激活windows10免费
  • windows没有搜索
  • 十天学会php教程
  • php自学教程
  • 没有认缴的股东算是股东?
  • win7系统文件在哪里可以找到
  • 特殊行业需要缴什么税
  • 冲减应收账款的分录
  • 房产置换流程及费用
  • PHP:mcrypt_get_cipher_name()的用法_Mcrypt函数
  • php实现数据批量导入
  • 微信小程序解决跨域问题
  • 阿尔瓦罗西萨
  • 收到无法支付的押金收入
  • 阿里php面试题
  • PHP+HTML+JavaScript+Css实现简单爬虫开发
  • laravel访问路由方式
  • php采集源码
  • 公章是否必须备案
  • php文件夹在哪
  • abap webservice
  • mail命令详解
  • php获取flag
  • 政府补助收入是免税收入还是不征税收入
  • 苹果cmsv10官网
  • 什么是技术服务工程师
  • Qt Port of WebKit ¶
  • 在建工程科目的内容
  • 支付宝收付款如何截图
  • 客户货款打到私人微信,删除公司电脑数据
  • 未入账分期金额要还吗
  • 周转材料主要包括什么和什么
  • 会计中为什么要用黑色笔写
  • 结转公允价值变动
  • 加计抵减政策15%声明
  • 会计从业人员信息查询
  • 财务单独核算是什么意思
  • 成本费用和损失的区别
  • ms sql mysql
  • xp系统磁盘检查进不去
  • slserves.exe - slserves是什么进程
  • 一岁的宝宝可以喝枸杞水吗
  • StatusClient.exe - StatusClient是什么进程 有什么作用
  • win7系统连接打印机没有反应
  • iptables -z
  • mysql如何添加外键
  • andengine学习,《android游戏开发实践指南》详解
  • 微信小程序实现微信支付
  • animate javascript
  • linux多线程编程详解
  • js移动元素位置
  • scp命令详解(全)
  • 深入探讨换个说法怎么说
  • python list set dict tuple
  • 国家税务总局增值税发票查验平台网址
  • 咸阳国税局长是哪里人
  • 进项转出怎么做
  • 深圳房东有钱吗
  • 关于切实加强建筑施工领域安全防范工作
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设