vue 优化小技巧 之 require.context()
1、require.context()
回忆一下 当我们引入组件时
第一步 创建一个子组件
第二步 import ... form ...
第三步 components:{..}
第四步 页面使用 <...></...>
代码实现:
目录结构:components / context / subset
页面效果
以上一共五个子组件 大量重复的代码
看到这里就开始步入正题喽~
<template>
<div>
<one></one>
<two></two>
<three></three>
<four></four>
<!-- <subsetone></subsetone> -->
</div>
</template>
<script> const path = require("path");
const files = require.context("@/components/context", 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,
data() {
return {};
},
methods: {}, };
</script>
东西学会了 那使用场景呢~~
假设一个页面很多的弹框 很多的下钻页 这时候我们就可以把他们有规律的放在一个文件夹里
例如 a文件 --里面是A的子组件集合
b文件 --里面是B的子组件集合
这时候引入组件就可以吧a文件一次性引入A组件中 同b---B
(ps:如果你非要都混在一个文件里 那你可以选择都引入选择性使用 或者还用以前办法一个一个找 还可以给一个规律正则匹配 个人认为这样文件夹不清楚不利于交接也不利于后期维护 )
参考链接:https://juejin.im/post/5d9d386fe51d45784d3f8637
vue 优化小技巧 之 require.context()的更多相关文章
- IT咨询顾问:一次吐血的项目救火 java或判断优化小技巧 asp.net core Session的测试使用心得 【.NET架构】BIM软件架构02:Web管控平台后台架构 NetCore入门篇:(十一)NetCore项目读取配置文件appsettings.json 使用LINQ生成Where的SQL语句 js_jquery_创建cookie有效期问题_时区问题
IT咨询顾问:一次吐血的项目救火 年后的一个合作公司上线了一个子业务系统,对接公司内部的单点系统.我收到该公司的技术咨询:项目启动后没有规律的突然无法登录了,重新启动后,登录一断时间后又无法重新登 ...
- 嵌入式C语言优化小技巧
嵌入式C语言优化小技巧 1 概述 嵌入式系统是指完成一种或几种特定功能的计算机系统,具有自动化程度高,响应速度快等优点,目前已广泛应用于消费电子,工业控制等领域.嵌入式系统受其使用的硬件以及运行环境的 ...
- .NET性能优化小技巧
.NET 性能优化小技巧 Intro 之前做了短信发送速度的提升,在大师的指导下,发送短信的速度有了极大的提升,学到了一些提升 .NET 性能的一些小技巧 HttpClient 优化 关于使用 Htt ...
- OI常用的常数优化小技巧
注意:本文所介绍的优化并不是算法上的优化,那个就非常复杂了,不同题目有不同的优化.笔者要说的只是一些实用的常数优化小技巧,很简单,虽然效果可能不那么明显,但在对时间复杂度要求十分苛刻的时候,这些小的优 ...
- D3D9 优化小技巧
此篇文章主要讲一些小技巧,针对前面转载的D3D9 GPU Hacks,我们可以做的一些优化. 在做延迟渲染或者其它需要深度的地方使用INTZ格式的纹理,这样可以直接对纹理进行操作,节省了显存和带宽,这 ...
- mysql优化小技巧
对mysql优化时一个综合性的技术,主要包括 a: 表的设计合理化(符合3NF) b: 添加适当索引(index) [四种: 普通索引.主键索引.唯一索引unique.全文索引] c: 分表技术(水平 ...
- Vue + Element 小技巧
说是小技巧 ,其实就是本人 就是一个小菜比 .如有大佬可以纠正,或者再救救我这个小菜比 跪谢 1.当后台返回一个字段需要根据不同字段内容在表格内显示相对应的文字(字段内容是死的,表格内需要显示对 ...
- How Javascript works (Javascript工作原理) (十一) 渲染引擎及性能优化小技巧
个人总结:读完这篇文章需要20分钟,这篇文章主要讲解了浏览器中引擎的渲染机制. DOMtree ----| |----> RenderTree CSSOMtree ----| ...
- JavaScript 工作原理之十一-渲染引擎及性能优化小技巧
原文请查阅这里,略有删减,本文采用知识共享署名 4.0 国际许可协议共享,BY Troland. 本系列持续更新中,Github 地址请查阅这里. 这是 JavaScript 工作原理的第十一章. 迄 ...
随机推荐
- 告别10kb/s的Github访问速度
由于种种原因,国内访问Github的体验一直不是很好.本文通过优化DNS缓存的方式,避免浏览器直接解析Github域名,来改善Github的访问速度. 本文分为如下三个部分: 通过IP地址查询获取访问 ...
- Java接口统一样式返回模板
Java接口统一样式返回模板 背景 在进行接口开发时,一般需要一个固定的返回样式,成功和失败的时候,都按照这种格式来进行统一的返回,这样,在与其他人进行接口之间的联调时不会显得很杂乱无章.而这种固定的 ...
- 再谈 APISIX 高性能实践
2019 年 8 月 31 日,OpenResty 社区联合又拍云,举办 OpenResty × Open Talk 全国巡回沙龙·成都站,APISIX 主要作者王院生在活动上做了<APISIX ...
- Ubuntu 14.04风扇不停转,风扇狂转 的解决办法,亲测有效。
Ubuntu 14.04风扇不停转,风扇狂转 的解决办法,亲测有效. 原文 http://ubuntuforums.org/showthread.php?t=2218367 楼主说:ubuntu 1 ...
- Java中Object类hashCode的底层实现
Java中Object类hashCode的底层实现 openjdk\jdk\src\share\native\java\lang\Object.c 42 static JNINativeMethod ...
- SpringBoot整合MybatisPlus3.X之乐观锁(十三)
主要适用场景 意图: 当要更新一条记录的时候,希望这条记录没有被别人更新 乐观锁实现方式: 取出记录时,获取当前version 更新时,带上这个version 执行更新时, set version = ...
- SpringCloud之Feign和Ribbon的选择(五)
Ribbon Ribbon 是一个基于 HTTP 和 TCP 客户端的负载均衡器它可以在客户端配置 ribbonServerList(服务端列表),然后轮询请求以实现均衡负载它在联合 Eureka 使 ...
- JavaFX简介和Scene Builder工具的安装使用简易教程
JavaFX概述和简介 富互联网应用是那些提供与Web应用程序类似的功能,并可作为桌面应用程序体验的应用.与用户的正常网络应用程序相比,它们提供更好的视觉体验.这些应用程序可作为浏览器插件或作为虚拟机 ...
- MySql数据库优化必须注意的四个细节(方法)
MySQL 数据库性能的优化是 MySQL 数据库发展的必经之路, MySQL 数据库性能的优化也是 MySQL 数据库前进的见证,下文中将从从4个方面给出了 MySQL 数据库性能优化的方法. 1. ...
- 前端开发之VSCode扩展
1.Chinese (Simplified) Language Pack for Visual Studio Code——中文语言包 2.Beautify——代码格式化工具 3.HTML Snippe ...