vue 引入公共组件之 require.context
时间:2021-08-09
本文章向大家介绍vue 引入公共组件之 require.context,主要包括vue 引入公共组件之 require.context使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
我们项目开发中,经常需要import或者export各种模块,那么有没有什么办法可以简化这种引入或者导出操作呢?答案是肯定的,下面就为大家介绍一下require.context
以前我们都是通过import 方式引入组件
import A from 'components/A' import B from 'components/B' import C from 'components/C' import D from 'components/D'
这样很蛋疼,因为每加一个组件,可能都要写这么一句,这样有规律的事,是否可以通过自动化完成?
require.context
require.context(directory, useSubdirectories, regExp)
- directory: 要查找的文件路径
- useSubdirectories: 是否查找子目录
- regExp: 要匹配文件的正则
用法
require.context('./components/', true, /\.js$/)
上面调用方法,到底返回的是什么?
var map = { "./A.js": "./src/components/test/components/A.js", "./B.js": "./src/components/test/components/B.js", "./C.js": "./src/components/test/components/C.js", "./D.js": "./src/components/test/components/D.js" }; function webpackContext(req) { var id = webpackContextResolve(req); return __webpack_require__(id); }
项目实际使用方法一:
在当前 .vue页面 公共组件components 文件夹内,创建一个 .js 文件
import Vue from 'vue';
const commonFilenameArr = [];
const requireComponents = require.context('./', false, /\.vue/);
requireComponents.keys().forEach(fileName => {
// 组件实例
const reqCom = requireComponents(fileName);
// 截取路径作为组件名
var reqComName = reqCom.name || fileName.replace(/\.\/(.*)\.vue/, '$1');
// 组件挂载
Vue.component(reqComName, reqCom.default || reqCom);
});
直接在 .vue 页面引入 .js 文件即可。打印看返回的arrList 数据。( 看数据直接明了就会明白 )
有问题,请大家指教
原文地址:https://www.cnblogs.com/yuerdong/p/15119225.html
- 云计算类型介绍
- 比特币存储与资产安全
- netsh,切换ip
- javascript对象查看器
- 加强的alert confirm js自定义对话框 多个按钮 ICO自定义
- js用于树型结构级联选择 支持三态级联选择
- 修改prototype使Event支持observe任何对象
- 两个小例子带你看懂什么是比特币分叉和2018必将大热的IFO
- 用c#添加Networkservice对文件夹的写权限
- 游标清除重复数据
- 研究人员警示智能音箱等物联网设备存在较多安全问题
- Tootip小程序,整理一下自己用
- 滴滴电单车--“街兔” 无奈相关域名已被注册
- 联发科将推出两款芯片,拥有AI和人脸识别技术,能和高通叫板吗?
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Laravel框架视图和模型操作方法分析
- 接口测试框架实战(六) | 配置的数据驱动
- PHP连续签到功能实现方法详解
- PHP实现发送微博消息功能完整示例
- php实现快速对二维数组某一列进行组装的方法小结
- PHP实现提取多维数组指定一列的方法总结
- PHP实现二维数组(或多维数组)转换成一维数组的常见方法总结
- Laravel框架Eloquent ORM简介、模型建立及查询数据操作详解
- Laravel框架下载,安装及路由操作图文详解
- PHP实用小技巧之调用录像的方法
- Laravel重定向,a链接跳转,控制器跳转示例
- Laravel 错误提示本地化的实现
- Laravel框架DB facade数据库操作详解
- laravel 解决强制跳转 https的问题
- 在laravel中实现将查询的对象转换为多维数组的函数