Vue中使用require.context自动引入组件的操作方法

更新时间：2024年01月06日 15:20:30 作者：邹荣乐

require.context 是 webpack 提供的一个API,用于创建context,即一组具有相同上下文的模块,使用 require.context 可以方便地加载多个模块,并且可以灵活地控制模块的加载顺序和依赖关系,本文给大家讲解Vue中使用require.context自动引入组件的方法,感兴趣的朋友一起看看吧

require.context (需要vue-cli3+的版本)

require.context(directory, useSubdirectories, regExp)

directory: 要查找的文件路径
useSubdirectories: 是否查找子目录
regExp: 要匹配文件的正则

1.在compoents文件下随便创建index.js文件

const requireComponent = require.context('./', true, /\.vue$/)
const install = (Vue) => {
    if (install.installed) return
    install.installed
    requireComponent.keys().forEach(element => {
        const config = requireComponent(element)
        if (config && config.default.name) {
            const componentName = config.default.name
            Vue.component(componentName, config.default || config)
        }
    });
}
if (typeof window !== 'undefined' && window.Vue) {
    install(window.Vue)
}
export default {
    install
}

2.mian.js引入该js

import install from './compoents'
Vue.use(install)

总结

我们可以通过require.context可以自动化引入文件。
其实我们不单单局限于组件，路由内，所有模块文件都是通用的，例如路由，接口封装模块，都是可以使用的。

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

您可能感兴趣的文章:

Vue snippets插件原理与使用介绍
这篇文章主要介绍了Vue snippets插件原理与使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧
2022-10-10
如何在Vue中抽离接口配置文件
这篇文章主要介绍了Vue中抽离接口配置文件的问题，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-10-10
使用Vuex实现一个笔记应用的方法
这篇文章主要介绍了使用Vuex实现一个笔记应用的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-03-03
在vue项目创建的后初始化首次使用stylus安装方法分享
下面小编就为大家分享一篇在vue项目创建的后初始化首次使用stylus安装方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-01-01
vue插件tab选项卡使用小结
这篇文章主要为大家详细介绍了vue插件tab选项卡的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-10-10
vue使用反向代理解决跨域问题方案
这篇文章主要为大家介绍了vue使用反向代理解决跨域问题方案详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-01-01
vue3+ts+vite使用el-table表格渲染记录重复情况
这篇文章主要给大家介绍了关于vue3+ts+vite使用el-table表格渲染记录重复情况的相关资料,我们可以通过合并渲染、数据缓存或虚拟化等技术来减少重复渲染的次数,文中通过代码介绍的非常详细,需要的朋友可以参考下
2023-12-12
Vue2.0 实现歌手列表滚动及右侧快速入口功能
这篇文章主要介绍了Vue2.0实现歌手列表滚动及右侧快速入口功能,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-08-08
vue3的介绍和两种创建方式详解(cli和vite)
这篇文章主要介绍了vue3的介绍和两种创建方式(cli和vite),vue3对比vue2带来的性能提升有很多优势，总体来说Vue 3在性能、开发体验和代码组织方面都有所改进，使得它更加适合于大型、复杂的应用程序开发，需要的朋友可以参考下
2023-04-04
vue如何自定义事件传参
这篇文章主要介绍了vue如何自定义事件传参，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-05-05