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

我们项目开发中,经常需要import或者export各种模块,那么有没有什么办法可以简化这种引入或者导出操作呢?答案是肯定的,下面就为大家介绍一下require.context

require.contextwebpack 提供的一个 API,用于创建 context,即一组具有相同上下文的模块。

使用 require.context 可以方便地加载多个模块,并且可以灵活地控制模块的加载顺序和依赖关系。

以前我们都是通过import 方式引入组件

javascript 复制代码
import A from 'components/A'
import B from 'components/B'
import C from 'components/C'
import D from 'components/D'

这样很蛋疼,因为每加一个组件,可能都要写这么一句,这样有规律的事,是否可以通过自动化完成?

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

javascript 复制代码
require.context(directory, useSubdirectories, regExp)
  1. directory: 要查找的文件路径
  2. useSubdirectories: 是否查找子目录
  3. regExp: 要匹配文件的正则

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

javascript 复制代码
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

javascript 复制代码
import install from './compoents'
Vue.use(install)

总结

我们可以通过require.context可以自动化引入文件。

其实我们不单单局限于组件,路由内, 所有模块文件都是通用的, 例如路由, 接口封装模块,都是可以使用的。

相关推荐
Amd7942 天前
Nuxt.js 应用中的 webpackConfigs 事件钩子
webpack·配置·模块·nuxt.js·插件·输出·钩子
188_djh5 天前
# ubuntu 安装的pycharm不能输入中文的解决方法
linux·ubuntu·pycharm·fcitx·export·pycharm不能输入中文·zh_cn.utf-8
SoftingChina10 天前
过程自动化的新黄金标准:Ethernet-APL
以太网·模块·过程自动化·ethernet-apl
一勺汤17 天前
YOLOv8模型改进 第十七讲 通道压缩的自注意力机制CRA
yolo·目标检测·outlook·模块·yolov8·yolov8改进·魔改
Amd79425 天前
Nuxt.js 应用中的 imports:extend 事件钩子详解
组件·模块·nuxt·导入·扩展·钩子·动态
酒茶白开水1 个月前
React五官方文档总结二状态管理
前端·react.js·前端框架·context·状态管理·usereducer
Amd7941 个月前
Nuxt.js 应用中的 imports:sources 事件钩子详解
生命周期·配置·模块·nuxt·依赖·扩展·钩子
Lossya1 个月前
【python实操】python小程序之跳过
开发语言·python·小程序·模块·封装·跳过
一勺汤1 个月前
YOLOv11模型改进-注意力-引入简单无参数注意力模块SimAM 提升小目标和遮挡检测
深度学习·yolo·目标检测·视觉检测·模块·改进·yolov11
逆境清醒1 个月前
CSS @规则(At-rules)系列详解___@import规则使用方法
前端·css·import