位置: 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)

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

  • word没有内容怎么弄下划线(word文档不见了怎么办)

    word没有内容怎么弄下划线(word文档不见了怎么办)

  • 苹果13怎么关闭振动(苹果13怎么关闭勿扰模式)

    苹果13怎么关闭振动(苹果13怎么关闭勿扰模式)

  • 苹果13时间在哪里设置(苹果13时间哪里模糊了是怎么回事)

    苹果13时间在哪里设置(苹果13时间哪里模糊了是怎么回事)

  • etc怎样在手机上缴费(etc怎样在手机上开发票)

    etc怎样在手机上缴费(etc怎样在手机上开发票)

  • 微信测试版安全吗(微信测试版安全性高吗)

    微信测试版安全吗(微信测试版安全性高吗)

  • 无线投屏已连接但没视频在电视上(无线投屏已连接上为什么电视上不显示)

    无线投屏已连接但没视频在电视上(无线投屏已连接上为什么电视上不显示)

  • 华为折叠手机上市时间(华为折叠手机上下折叠)

    华为折叠手机上市时间(华为折叠手机上下折叠)

  • ps取消选择是哪个键(ps取消选择是哪个)

    ps取消选择是哪个键(ps取消选择是哪个)

  • 路由器多长时间换一个(路由器多长时间重启一次比较好)

    路由器多长时间换一个(路由器多长时间重启一次比较好)

  • 新号码注册的淘宝被永封(新号码注册的淘宝怎么找)

    新号码注册的淘宝被永封(新号码注册的淘宝怎么找)

  • pacm00什么手机(PACM00什么手机型号)

    pacm00什么手机(PACM00什么手机型号)

  • 钉钉看优秀作业有记录吗(钉钉看优秀作业有显示吗)

    钉钉看优秀作业有记录吗(钉钉看优秀作业有显示吗)

  • 为什么下载了软件屏幕上没有(为什么下载了软件桌面上没有显示)

    为什么下载了软件屏幕上没有(为什么下载了软件桌面上没有显示)

  • 优酷会员跟酷喵可以通用吗(优酷会员跟酷喵会员 吃相太难看了吧)

    优酷会员跟酷喵可以通用吗(优酷会员跟酷喵会员 吃相太难看了吧)

  • 京东帮助中心在哪里(京东客户服务帮助中心在哪里)

    京东帮助中心在哪里(京东客户服务帮助中心在哪里)

  • 苹果从安卓设备转移数据代码在哪里输入(苹果从安卓设备转移)

    苹果从安卓设备转移数据代码在哪里输入(苹果从安卓设备转移)

  • Win11怎么快速加密硬盘?Win11加密硬盘方法(win11 zen3)

    Win11怎么快速加密硬盘?Win11加密硬盘方法(win11 zen3)

  • Win7绝地求生“Cannot find‘MSVCP140.dll’”(win7绝地求生帧数不稳定)

    Win7绝地求生“Cannot find‘MSVCP140.dll’”(win7绝地求生帧数不稳定)

  • 远程桌面连接失败(远程桌面连接失败了)

    远程桌面连接失败(远程桌面连接失败了)

  • [进阶] list 过滤 stream 的lambda进阶操作, 这一篇就够了(list集合过滤)

    [进阶] list 过滤 stream 的lambda进阶操作, 这一篇就够了(list集合过滤)

  • 【视觉SLAM14讲】【汇总】(视觉slam有多难)

    【视觉SLAM14讲】【汇总】(视觉slam有多难)

  • DedeCMS做博客首页生成列表分页的另类实现办法(博客首页设计)

    DedeCMS做博客首页生成列表分页的另类实现办法(博客首页设计)

  • 一般纳税人劳务公司可以开3%的发票吗
  • 出口合同包括哪些条款
  • 差旅费抵税怎么算
  • 开民工工资专户
  • 公司团体体检的洽谈
  • 公转法人交税
  • 小企业长期股权投资的核算
  • 二手房的折旧率怎么算
  • 服务业收到服务业发票分录
  • 收到3%的增值税专用发票可以抵扣吗
  • 如何查询对方是不是老赖
  • 购进货物未取得增值税专用发票
  • 固定资产报废税费怎么处理
  • 增资的印花税纳税义务时间
  • 个人营业执照怎么注销网上申请流程
  • 非直系亲属继承房产后再卖掉后交税吗
  • 会计利润和税务利润的暂时性差异和永久性差异
  • win11右下角时间设置
  • 购买员工宿舍床上用品怎么入账
  • 主营业务成本是借方增加还是贷方增加
  • 上月暂估入账
  • 公司收到政府科技创新奖
  • 门店出纳的工作内容
  • mac big sur 菜单栏
  • 个人所得税投诉电话是多少
  • shell检查变量是否为空
  • 房地产企业开发成本结转
  • php 数组定义
  • 增值税专用发票有几联?
  • agmservice.exe是什么
  • 游泳耳朵进水怎么办
  • php获取目录所有文件
  • 森林中的结香花,日本 (© nattya3714/Getty Images)
  • 企业汇算清缴中,A107070表中的数据是自动跳出来嘛
  • 微信小程序开发零基础入门
  • 经验模态分解和变分模态分解
  • vue-axios详细介绍
  • dns域名解析两种方式
  • configure命令
  • vports命令怎么用
  • 命令执行语句
  • php用在哪些方面
  • 利润分配反映什么
  • vue状态机
  • 防洪保安资金可以抵扣个税吗
  • 发票已开不确认收入可以吗?
  • 退回上年度企业所得税小规模怎么做分录
  • 哪些税是季报
  • 预收账款怎么变成应收
  • 实施资本公积金的目的
  • 建设工程审计报告包括哪些内容
  • 会计人员信息采集工作证明模板
  • sqlserver2008密码要求
  • 开票有误重新开票怎么做分录
  • 社保局会给失业人员打电话吗
  • 专项资金会计和税务处理差异
  • 无偿赠送货物如何申报增值税
  • 社保缓缴政策2020
  • 一年内到期的非流动负债是经营性负债吗
  • 一年以上的借款是长期借款吗
  • 实收资本应补缴哪些税
  • 付给非公司员工提成税务处理
  • 本年利润年末有余额怎么回事
  • 营业利润率公式计算公式
  • mysql分区语句
  • win10好几个操作系统
  • 怎么彻底关闭windows更新
  • win7系统安装ie11浏览器
  • nodejs formidable
  • python干嘛用
  • unity怎么创建字体
  • 安卓实时屏幕
  • jquery 使用
  • fastdwg插件
  • jquery-easyui-1.3.3
  • 遵从与尊从
  • 税收缴款书税务收现专用的开票人是谁
  • 加强案件查办工作方案
  • 未开票收入下月开票会计分录
  • 企业并购重组的方式有哪些
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设