技能
文章平均质量分 76
YorcentLuo
这个作者很懒,什么都没留下…
展开
-
详细记录前端项目使用import懒加载组件打包失败的踩坑之路
最后还是回到babel.config.js文件,尝试把这个配置删了'@vue/cli-plugin-babel/preset',奇迹出现了,果然成了。原创 2023-06-07 09:46:33 · 2751 阅读 · 4 评论 -
关于vue 动态引入(异步加载import和require)组件的方法和坑(按需懒加载组件,动态生成路由)babel-plugin-dynamic-import-node 优化编译速度
关于vue 动态引入(异步加载)组件的方法和坑(按需懒加载组件,动态生成路由)babel-plugin-dynamic-import-node 优化编译速度原创 2022-01-26 15:59:04 · 23389 阅读 · 2 评论 -
根据url生成二维码,扫描打开url的两种方法编辑器
js 根据url生成二维码,扫描打开url的两种方法场景产品给你一个url,让你做一个二维码,扫描二维码之后打开对应的url链接。比如:扫描之后弹出一个下载app的页面。实现先上html代码:<div class="qrcode-wrapper"> <img src="../static/assets/qrcode.png" title="APP下载二维码" class="image-sign" onmouseover="showQrcodeImage()"原创 2021-01-12 15:49:57 · 1665 阅读 · 0 评论 -
不用marquee标签, js 实现文本在页面上无间断 水平方向滚动
场景:很多人知道这个元素标签marquee, 用来实现内容在窗体中自由自主滚动,就像一个led屏幕上,一直有一行字在滚动。这个标签确实很方便,可以控制方向,速度等等。但是,marquee标签却被官方在很早之前就被废弃了。所以,我们考虑可以自己写一个组件,替代marquee标签。实现:先上html代码:<div class="parent"> <div id="scrollText" class="child"></div> .原创 2021-01-05 18:12:31 · 943 阅读 · 0 评论 -
关于zTree 组件,按需动态获取子节点并展示获取到的子节点的解决方案
场景:其实也算是一个比较普遍的场景,就是加载树的时候,只加载某几层的节点,节点数据最多的最底层的节点不加载,而是在点击或者展开某个节点之后,根据点击或者展开的节点动态加载出获取到的子节点。这样能有效的提高加载树的性能,特别是某些层级的节点数据特别大的时候,更为明显。这里以zTree 组件为例,其他树组件思路和逻辑类似。解决方案:方案1: 点击树节点,获取该节点下的子节点数据,然后调用更新节点和展开节点的接口,便可实现。这个方案比较简单,常见,直接上代码:callba..原创 2020-12-23 19:54:56 · 1237 阅读 · 0 评论 -
vue 父子组件生命周期 分析以及 vueX 异步存储和读取
原因:对象变量都是对象在内存中的地址值,普通数据变量是实际的值。所以你打印的那个对象其实在打印的那一刻是空对象,但是你展开的时候,commit操作已经完成,所以对象被扩展为你期望看到的值。但是普通类型打印的那一刻是什么就是什么因为actions是异步操作,你在commit方法里再去打印肯定就有值了为什么对象能打印到?因为对象那个变量是地址,你展开的时候对象已经扩充了,所以能看到解决办法:1,在templent中可直间使用dt_org_data.options2,如果想在方法中使用this.dt_o原创 2020-12-03 19:20:52 · 628 阅读 · 0 评论 -
js 获取上传图片和视频的宽高,还有视频的时长
场景:当产品经理告诉你说:我们需要限制上传的图片或视频的尺寸,不符合要求不允许上传,这个时候你该怎么做?不用多想,很明显我们需要想办法拿到图片或视频的宽度,然后和预期的尺寸进行对比过滤,就能轻易实现这个需求。上代码:// 获取素材宽高 getMaterialResolution (info, callback) { const _this = this const reader = new FileReader() let width = .原创 2020-10-28 16:30:24 · 1900 阅读 · 0 评论 -
base64,string,blob, blob url互转的方法
话不多说,直接上代码:<一>base64 转 blob1,通过第三方包:b64-to-blobimport b64ToBlob from 'b64-to-blob'public base64ToBlob(base64: string): Promise<Blob> { return new Promise((resolve, reject) => { try { let arr .原创 2020-07-31 16:46:12 · 1006 阅读 · 0 评论 -
谈谈Javascript 中 promise、async和await, setTimeout的执行顺序
Javascript有一个main thread主线程和call-stack调用栈(执行栈),所有的任务都会被放到调用栈等待主线程执行。JS调用栈采用的是后进先出的规则,当函数执行的时候,会被添加到栈的顶部,当执行栈执行完成后,就会从栈顶移出,直到栈内被清空。Javascript单线程任务被分为同步任务和异步任务,同步任务会在调用栈中按照顺序等待主线程依次执行,异步任务会在异步任务有了结果后,将注册的回调函数放入任务队列中等待主线程空闲的时候(调用栈被清空),被读取到栈内等待主线程的执行。...原创 2020-05-18 16:40:12 · 395 阅读 · 0 评论 -
浅谈大型项目前端架构设计(转载)
原文链接:https://juejin.im/post/5cea1f7051882506400054721、综合我在2年之前,写过一篇中小型项目的前端架构浅谈。随着能力的上升,以及在阿里巴巴工作的经验,是时候写一篇大型项目的前端架构分析了。本篇文章不会更多侧重于具体技术实现,而是尝试从更高角度出发,分析为什么要这么做,这些设计能解决什么问题,成本和收益如何。由于作者能力有限,...转载 2020-04-26 18:10:23 · 946 阅读 · 0 评论 -
Nginx 部署 vue项目 (history模式)
大家都知道,vue router有两种模式:1,hash模式hash模式应该是平时大家用的最多的一种模式,它的标志是路由地址都会加上#。2,history模式history模式则不会加上#号,这样url看起来比较干净。但是使用history模式,会导致一个问题,就是在某个路由页面上刷新的时候或者直接访问多级路由url的时候会报404.import Vue from 'vue'...原创 2020-04-09 10:27:42 · 3319 阅读 · 0 评论 -
高德地图 从地图的若干个点标记marker群中,找到某一个点标记marker
这种场景不多见,但有的项目也不可避免会有这种需求。那么,我们如何在地图里若干个点标记中,找到你想要的那个呢?其实不难!在高德地图开发文档中,关于marker的所有属性中,有一个很多属性非常好用,其中有一个属性名叫:extData,它的类型时any。那说明,你可以在创建marker对象时候,就可以塞任何你觉得可以用得上的数据进去。很明显,如果你想要一个marke...原创 2019-11-04 15:56:57 · 4510 阅读 · 4 评论 -
关于vue项目打包部署到nginx服务器,由于js文件过大导致首次加载速度过慢的解决办法和踩坑
很多时候,一个vue项目打包下来,app.js 主文件都会有几兆,大点的项目都会有十几二十兆,还有app.css的打包文件可能也会很大。对于一般的服务器来说,首次去打开部署好的平台页面,加载起来会很慢。这样的速度肯定是不能容忍的。当然,首要的途径是先尽量给打包文件app.js和app.css减重,让它更轻。不过,大部分时候,这个文件再怎么建你也不能从20M减到10M,5M,甚至更小。...原创 2019-10-22 17:39:59 · 11138 阅读 · 0 评论