码迷,mamicode.com
首页 > 其他好文 > 详细

vue 优化小技巧 之 require.context()

时间:2019-11-20 13:00:55      阅读:95      评论:0      收藏:0      [点我收藏+]

标签:info   direct   exp   set   正则匹配   reg   str   directory   五个   

1、require.context()

回忆一下 当我们引入组件时 

 第一步 创建一个子组件   第二步 import ... form ...    第三步 components:{..}     第四步 页面使用 <...></...>

  代码实现:                                                  

技术图片   

目录结构:components /  context  / subset

   技术图片         

页面效果

  技术图片

以上一共五个子组件 大量重复的代码 

 

 看到这里就开始步入正题喽~

require.context(directory,useSubdirectories,regExp)
接收三个参数:
directory:说明需要检索的目录
useSubdirectories:是否检索子目录     (此例中 : 当为true时 subsetone可用)
regExp: 匹配文件的正则表达式,一般是文件名

技术图片 

东西学会了 那使用场景呢~~  

假设一个页面很多的弹框 很多的下钻页 这时候我们就可以把他们有规律的放在一个文件夹里 
例如 a文件 --里面是A的子组件集合
   b文件 --里面是B的子组件集合    

这时候引入组件就可以吧a文件一次性引入A组件中 同b---B  

(ps:如果你非要都混在一个文件里  那你可以选择都引入选择性使用 或者还用以前办法一个一个找 还可以给一个规律正则匹配  个人认为这样文件夹不清楚不利于交接也不利于后期维护 )

参考链接:https://juejin.im/post/5d9d386fe51d45784d3f8637

 

 

vue 优化小技巧 之 require.context()

标签:info   direct   exp   set   正则匹配   reg   str   directory   五个   

原文地址:https://www.cnblogs.com/chen-yi-yi/p/11896635.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!