首页 > 其他分享 >require.context()的用法详解

require.context()的用法详解

时间:2022-09-21 14:33:14浏览次数:97  
标签:files vue const require 详解 context 组件

require.context(directory,useSubdirectories,regExp)

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

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

 

1.常常用来在组件内引入多个组件

const path = require('path')
const files = require.context('@/components/home', false, /\.vue$/)
const modules = {}
files.keys().forEach(key => {
  const name = path.basename(key, '.vue')
  modules[name] = files(key).default || files(key)
})
export default{
    ...
    components:modules
}

2.在main.js中引入大量公共组件

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)
})

 

 

参考---https://blog.csdn.net/diaojw090/article/details/110828200

标签:files,vue,const,require,详解,context,组件
From: https://www.cnblogs.com/pwindy/p/16715495.html

相关文章

  • MySQL主从同步详解与配置
    MySQL主从同步详解与配置走鹿带凨爱生活,有理想,善思考,能沟通 21人赞同了该文章 https://zhuanlan.zhihu.com/p/335142300MySQL主从同......
  • Android Gradle plugin requires Java 11 to run. You are currently using Java 1.8
    因为另一台机器开发时,androidstudio提示更新什么东西,无脑点了。导致原先的那台开发机器,无法build,报异常:AndroidGradlepluginrequiresJava11torun.Youarecurre......
  • df.drop_duplicates() 详解
     删除含有指定元素的行或列,或删除指定行,列用法:DataFrame.drop(labels=None,axis=0,index=None,columns=None,inplace=False)参数说明:labels就是要删除的行列的名字,......
  • Java无难事:详解Java编程核心思想与技术 pdf
    高清扫描版下载链接:https://pan.baidu.com/s/1Ht352zrCXy9ArE-Th9fgNg点击这里获取提取码 ......
  • Flex弹性布局详解
    简介FlexibleBox模型,通常被称为flexbox弹性盒子布局,是一种一维的布局模型。它给flexbox的子元素之间提供了强大的空间分布和对齐能力。我们说flexbox是一种一维的......
  • ES6模块之export和import详解
    ES6中的模块即使一个包含JS代码的文件,在这个模块中所有的变量都是对其他模块不可见的,除非我们导出它。ES6的模块系统大致分为导出(export)和导入(import)两个模块。1、模块导......
  • Python学习:len() 函数详解:获取字符串长度或字节数、join()方法:合并字符串
    Python中,要想知道一个字符串有多少个字符(获得字符串长度),或者一个字符串占用多少个字节,可以使用len()函数。语法格式:len(string)string用于指定要进行长度统计的字符串......
  • css选择器详解
    CSS选择器CSS选择器用于"查找"(或选取)要设置样式的HTML元素。我们可以将CSS选择器分为五类:基本选择器(根据名称、id、类来选取元素)组合器选择器(根据它们之间的特......
  • HTML5中的表单详解!
    表单是什么?对于用户而言是数据的录入和提交的界面对于网站而言获取用户信息的途径HTML<form>元素表示文档中的一个区域,此区域包含交互控件,用于向Web服务器提交信息......
  • python-命令行参数处理 getopt模块详解
    有时候我们需要写一些脚本处理一些任务,这时候往往需要提供一些命令行参数,根据不同参数进行不同的处理,在Python里,命令行的参数和C语言很类似(因为标准Python是用C语言实......