vue require.context()的用法实例详解

 更新时间:2023年04月06日 10:01:59   作者:白嫖leader  
require.context是webpack提供的一个api,通常用于批量注册组件,下面这篇文章主要给大家介绍了关于vue require.context()用法的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

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

案例如下:

代码目录结如下(这个看起来可能比较乱,先将就一下吧):

有两个将会被用到的组件:

我们主要关注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>

总结 

到此这篇关于vue require.context()用法详解的文章就介绍到这了,更多相关require.context()用法详解内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • rem实现响应式布局的思路详解

    rem实现响应式布局的思路详解

    这篇文章主要为大家介绍了rem实现响应式布局的思路详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • 关于vue.js过渡css类名的理解(推荐)

    关于vue.js过渡css类名的理解(推荐)

    这篇文章主要介绍了关于vue.js过渡css类名的理解,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-04-04
  • Vue项目如何部署到Tomcat服务器上

    Vue项目如何部署到Tomcat服务器上

    这篇文章主要介绍了Vue项目如何部署到Tomcat服务器上,Vue中自带webpack,可以通过一行命令将项目打包,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-03-03
  • Vue3中实现网页时钟功能(显示当前时间并每秒更新一次)

    Vue3中实现网页时钟功能(显示当前时间并每秒更新一次)

    本文将详细介绍如何在Vue3中实现一个每秒钟自动更新的网页时钟,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-07-07
  • vue跳转页签传参并查询参数的保姆级教程

    vue跳转页签传参并查询参数的保姆级教程

    这篇文章主要介绍了vue跳转页签传参并查询参数的保姆级教程,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-04-04
  • 去除element-ui下拉框的下拉箭头的实现

    去除element-ui下拉框的下拉箭头的实现

    我们最开始拿到的element-ui是带有下拉箭头的,那么如何去除element-ui下拉框的下拉箭头的实现,本文就详细的介绍一下,感兴趣的可以了解一下
    2023-08-08
  • Vue3报错‘defineProps‘ is not defined的解决方法

    Vue3报错‘defineProps‘ is not defined的解决方法

    最近工作中遇到vue3中使用defineProps中报错,飘红,所以这篇文章主要给大家介绍了关于Vue3报错‘defineProps‘ is not defined的解决方法,需要的朋友可以参考下
    2023-01-01
  • Vue3 vite配置css 的sourceMap及文件引用配置别名的过程

    Vue3 vite配置css 的sourceMap及文件引用配置别名的过程

    这篇文章主要介绍了Vue3 vite配置css的sourceMap,及文件引用配置别名的过程,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-07-07
  • vue form 表单提交后刷新页面的方法

    vue form 表单提交后刷新页面的方法

    今天小编就为大家分享一篇vue form 表单提交后刷新页面的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Jeeplus-vue 实现文件的上传功能

    Jeeplus-vue 实现文件的上传功能

    这篇文章主要介绍了Jeeplus-vue 实现文件的上传,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-09-09

最新评论