- 博客(625)
- 资源 (24)
- 问答 (1)
- 收藏
- 关注
原创 七个超级实用的 Vue 3 插件和库
总而言之,Vue 3 是一个强大的 JavaScript 框架,我们能够创建令人难以置信的用户界面和应用程序。借助本文中提到的插件和库,我们可以简化工作流程并在更短的时间获得更佳的结果。
2023-03-31 14:36:32
10
原创 如何从 0 开始搭建 Vue 组件库
组件设计是通过对功能及视觉表达中元素的拆解、归纳、重组,并基于可被复用的目的,形成规范化的组件,通过多维度组合来构建整个设计方案,將这些组件整理在一起,便形成组件库。本文我们主要讲述基于Vant CLI的自建组件库。Vant CLI 是一个基于 Vite 实现的 Vue 组件库构建工具,通过 Vant CLI 可以快速搭建一套功能完备的 Vue 组件库。
2023-03-31 14:09:46
11
原创 高颜值微信小程序 UI 组件库!
WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本,并由社区团队维护 React 版本和支付宝小程序版本。目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本,并由社区团队维护 React 版本和支付宝小程序版本。uView UI,是uni-app生态优秀的UI框架,全面的组件和便捷的工具会让你信手拈来,如鱼得水。
2023-03-31 14:02:35
107
原创 Vite,Vue3项目,添加Jsconfig.Json和类型定义,让你的IDE更智能
我们的项目中使用了element-plus组件库,为了提供更好的智能感知,我添加了element-plus的TS类型定义到compilerOptions的types数组。大家不要使用target配置JS语言版本,否则会出现各种各样的问题,会造成智能感知失灵,一定要使用lib配置。在过去,我通常单独使用jsdoc。为了便于管理,我在项目根目录创建了一个typings文件夹,每个模块的类型定义用一个单独的TS文件,使用命名空间来管理,例子如下。当我们调用该函数,输入参数的时候,编辑器给出了非常智能的提示。
2023-03-31 13:28:47
9
原创 15 个为 Web 开发人员准备的杀手级网站资源
您可以从 Ionic 中找到您需要的任何图标,包括用于 Web、iOS、Android 和桌面应用程序的高级设计图标。前端工程师经常需要检查浏览器的兼容性,Can I use是一个可以查询各种流行浏览器的CSS和JavaScript的特性和兼容性的网站。今天我想和大家分享一些有用的网站,有的可以提高你的工作效率,有的可以帮助你写文章,有的可以帮助你做设计。创建自述文件的最简单方法,这个简单的编辑器允许您快速添加和自定义项目自述文件所需的所有部分。查看您的网站的运行情况,揭示速度缓慢的原因,并发现优化机会。
2023-03-31 13:22:52
11
原创 将 Node.js 应用程序容器化的七种方法
本文列出了七种容器化 node.js 应用程序的方法,让我们简要地看一下它们。本文列出了七种容器化 node.js 应用程序的方法,让我们简要地看一下它们。在过去的五年里,Node.js 一直是严肃程序员的最爱。最大吞吐量的 JavaScript 运行时环境是一个免费的开源程序,旨在提高JavaScript在多个平台上的性能。由于其事件驱动、非阻塞 I/O 方法,Node.js 体积小且处理请求速度快,使其成为数据密集型、实时和分布式应用程序的绝佳选择。
2023-03-31 13:19:40
13
原创 Vue 3现实生活中的过渡和微互动
本文介绍了Vue.js在现实生活中如何实现转换和微交互的例子,以及这些功能是如何提高用户体验的。作者指出,Vue.js是一个灵活的框架,可用于实现各种各样的功能。文章中介绍了一些常见的转换和微交互,如弹出窗口、拖动、下拉刷新等,以及如何使用Vue.js实现这些效果。文章强调了用户体验的重要性,并提供了一些技巧,如利用动画和颜色来吸引用户的注意力,提高用户的参与度。作者还介绍了一些Vue.js插件和库,如Vue-Router、Vuex和Axios,以及如何使用它们来简化代码和提高效率。
2023-03-31 13:15:46
4
原创 [JS代码]如何判断ipad或者iphone是否为横屏或者竖屏 - portrait或者landscape
【代码】[JS代码]如何判断ipad或者iphone是否为横屏或者竖屏 - portrait或者landscape。
2023-03-28 16:08:48
9
原创 了解CSS Module作用域隔离原理
我们知道,Javascript发展到现在出现了众多模块化规范,比如AMD、CMD、 Common JS、ESModule等,这些模块化规范能够让我们的JS实现作用域隔离。CSS Module出现的背景我们知道,Javascript发展到现在出现了众多模块化规范,比如AMD、CMD、 Common JS、ESModule等,这些模块化规范能够让我们的JS实现作用域隔离。
2023-03-28 16:05:49
9
原创 完了,CPU100%了,教你如何快速定位CPU100%问题
cpu使用率100%问题,是一个让人非常头疼的问题。因为出现这类问题的原因千奇百怪,最关键的是它不是必现的,有可能是系统运行了一段时间之后,在突然的某个时间点出现问题。今天特地把我和同事,之前遇到过的cpu使用率100%的问题,总结了一下,给有需要的朋友一个参数。
2023-03-28 14:11:02
17
原创 为什么Next.js 13会改变游戏规则?
最近推出的Next.js 13带来了很多新功能和升级,如新路由、新的数据获取方式(React suspense)、Vercel字体、og图片生成、布局等[2]。它们可以改变游戏规则并承诺速度极快,但是它们也有一些权衡[2]。然而,需要注意的是,尽管这些创新性的功能引入了最新的React,但许多重要的功能仍处于RFC阶段,因此在Next.js 13中可能无法使用[1]。
2023-03-28 14:08:32
12
转载 前端如何实现词云效果?
使用 WordCloud 对象进行词云的生成和渲染。其中,第一个参数是上一步中创建的容器元素,第二个参数是一个设置选项的对象,其中 list 属性是一个按照 [ ['foo', 12], ['bar', 6]] 格式排列的二维数组,表示每个单词及其权重。今天来分享 6 个超实用的词云库,以快速实现词云效果!
2023-03-28 13:57:37
9
原创 vue2升级vue3:vue-i18n国际化异步按需加载
vue2异步加载之前说过,vue3还是之前的方法,只是把 i18n.setLocaleMessage改为i18n.global.setLocaleMessage。
2023-03-22 13:55:27
20
原创 视频通信近实时生成字幕项目实践
这两天做了一个视频通信近实时字幕生成工具,前端通过浏览器打开摄像头,生成用户画面,根据用户的语音近实时自动生成字幕展示在画面下方。对于没有接触过音视频处理的我来说,刚开始还是有点懵的,虽然借助了 chatgpt,但是还是走了一段时间的弯路。不过花了大概一天时间还是比较完美的实现了,还是非常有成就感的。谨以此记录最终成功的版本的实现思路和实现过程,文末附带源码和源码启动过程。
2023-03-22 11:40:51
100
原创 前端安全问题——暴破登录
声明:本文仅供学习和研究用途,请勿用作违法犯罪之事,若违反则与本人无关。暴力破解登录是一种常见的前端安全问题,属于未授权访问安全问题的一种,攻击者尝试使用不同的用户名和密码组合来登录到受害者的账户,直到找到正确的用户名和密码组合为止。攻击者可以使用自动化工具,如字典攻击、暴力攻击等来加快攻击速度。这种攻击通常针对用户使用弱密码、没有启用多因素身份验证等情况。
2023-03-22 11:37:23
46
原创 深入了解 JavaScript 内存泄漏
在硬件级别上,计算机内存由大量触发器组成。每个触发器包含几个晶体管,能够存储一个位。单个触发器可以通过唯一标识符寻址,因此我们可以读取和覆盖它们。因此,从概念上讲,我们可以把我们的整个计算机内存看作是一个巨大的位数组,我们可以读和写。这是内存的底层概念,JavaScript 作为一个高级语言,不需要通过二进制进行内存的读写,而是相关的 JavaScript 引擎做了这部分的工作。在计算机科学中,内存泄漏指由于疏忽或错误造成程序未能释放已经不再使用的内存。
2023-03-22 11:29:13
157
原创 NodeJs的模块化和包
模块化是解决一个复杂问题时,自顶向下逐层把系统划分为若干个模块的过程,编程中,就是遵守一定规则,把一个大文件拆成独立并相互依赖的多个小模块。
2023-03-22 11:23:07
14
原创 ffmpeg超级方便命令行
视频录制需要安装dshow软件Screen Capturer Recorder。将所有符合这个格式的jpg图片合成帧速率25fps的MP4视频。,否则会导致分离出来的数据没有SPS、PPS而无法播放。拼接mp4格式(mp4list.txt保存视频名称列表)每秒15帧,每帧都提取,提取5秒时长,输出分辨率。提取3秒数据,分辨率和源视频一致。同时录制视频和声音(默认参数)注:分离某些封装格式(例如。提取3秒数据,分辨率转为。将视频转成视频编码格式。的时候,需要首先写入。录制视频(默认参数)录制声音(默认参数)
2023-03-22 11:18:34
164
原创 获取短信验证码
获取短信验证码,相信在绝大多数前端开发者中肯定经常遇到,既然常用,就难免需要开发一个可以简单易用的组件供后续遇到时使用,接下来就直接上按我理解的方式来实现获取短信验证码组件。点击时添加reqLoading 变量控制是否正在请求获取验证码接口,且通过此变量控制el-button加载动画,这也是为什么用el-button的原因。创建一个el-button按钮,先从缓存中获取时间,当存在时间时,倒计时。当倒计时完成时,清除缓存,清除定时器,将各个变量重置为初始变量。至于样式问题,就自己根据UI美化。
2023-03-04 22:30:42
48
原创 利用fuse.js实现搜索菜单功能
对于后台管理系统而言,当页面菜单数量很多的时候,找一个功能点,就可能找半天。因此急需出一个搜索菜单功能,于是发现了fuse.js这个能帮助实现该功能的东西。fuse.js是一个轻量的模糊搜索库。
2023-03-04 22:30:02
78
原创 支付宝小程序嵌套H5总结
小程序web-view容器存放h5页面url需要是在小程序中配置白名单的地址。如何添加H5域名白名单点击跳转小程序开放平台添加白名单后页面就可以在小程序中展示了,但是由于h5请求的接口是非 https 的接口,所以会报错,于是得将h5页面的请求都改为https请求。且得将请求域名添加白名单如何添加服务器域名白名单这样小程序就可以正常访问H5页面了。接下来就是 小程序与H5的通讯问题。小程序与H5通讯关键API :my.createWebViewContext支付宝小程序。
2023-03-04 22:29:43
105
原创 vue项目配置优先级最高系统变量
经过上述步骤,即可轻松在打包后仍可轻松改变环境变量,无需重新打包。当然现在基本上不是人工打包部署,大多数使用Jenkins部署,一键部署也很轻松。总之,知此方法有益无害,偶尔可能会用到,所以项目可以提前做好此配置,有备无患。
2023-03-04 22:29:36
19
原创 el-cascader联级组件在ie上显示样式有问题的解决方案
联级组件在pc端相信大家经常使用,且在谷歌浏览器上表现良好,几乎没啥样式问题,但是细心的人一定会在ie浏览器上看看,查看ie浏览器上是否有样式问题。果不其然,堂堂element组件在ie上也表现的并不是很兼容。在ie浏览器上会出现如下样式问题。这些是比较严重样式显示问题。这就是解决el-cascader在ie上显示有问题的代码.第一个问题和第二个问题,采用同样的方式解决。4、内容宽度无法显示完整,无法自适应宽度。2、选中打勾样式偏下,上下不居中。3、加载图标显示偏下,上下不居中。第四个问题,样式代码如下。
2023-03-04 22:29:35
86
原创 国际化经验分享
什么是国际化国际化(internationalization)是设计和制造容易适应不同区域要求的产品的一种方式。它要求从产品中抽离所有地域语言,国家/地区和文化相关的元素。换言之,应用程序的功能和代码设计考虑在不同地区运行的需要,其代码简化了不同本地版本的生产。开发这样的程序的过程,就称为国际化。
2023-03-04 22:29:27
19
原创 短信验证码组件
上一篇短信验证码组件我们使用的是el-button组件进行实现,过渡依赖element,于是今天解决掉此问题。当然最主要的问题不是这个问题,主要存在的不足如下:1、依赖el-button2、即使页面离开,定时器还是得等到时间到了才会停止,途中一直在操作设置缓存3、当此组件在嵌套的iframe中使用时,iframe被关掉后很久,再进去,依然会从离开时剩余时间开始倒计时4、同3,当页面直接关掉时缓存就不会清除5、有的地方就是需要刷新就可以重新获取,不可配置,这也是不足。
2023-03-04 22:29:15
25
原创 获取网页链接里的视频原件
以上三种方法,其实最终目的就是找到MP4链接地址,然后再浏览器中打开,使用自带播放器里面的下载功能实现下载MP4文件。此篇文章希望能帮到有需要的你们。如有问题或者合作可私聊.
2023-03-04 22:28:17
182
原创 自适应textarea文本域高度原理
使用参考文本这个技巧在前端中是一个很好的思路方法,曾今就遇到一个修改密码解码,需要将输入的文本变成*展示在文本框,这时就可以用一个真正的输入框透明掉,盖住底下展示的*号框。看到的是*号,但是操作的是顶部透明的部分,涉及知识点就是使用等宽字体,加上一系列样式操作,懂ps图层的就比较好理解。可能名字叫的不是很容易理解,这里解释下,就是一个文本域输入框的高度会跟随内容高度变化而刚好就是文本高度。最终方案就是设计一个参考文本,用来判断高度。
2023-03-03 09:37:02
911
原创 url上携带参数应该注意到事项
渲染base64头像,在谷歌浏览器上显示正常,在ie上显示不全,一开始以为是ie不兼容问题,后面经过各种排查才发现,原来在ie浏览器上获取的数据不全。获取的时候 代码中并未使用解码方法,但是已经是 解码后的数据,说明vue的$route对象上的数据是已经帮我们解码过的了。type={"a":"1"}上面只是简单的数据,因此一看好像没啥问题,但是如果数据上有一些特殊的字符,接收到的数据可能就会有所差距。由于我们使用的vue开发的项目,且使用hash模式开发,于是就想要跳转的链接上会有个 # 字符。
2023-03-03 09:34:41
117
原创 20个常用的JavaScript简写技巧
如果你的对象包含 function, undefined or NaN 值的话,JSON.parse(JSON.stringify(obj)) 就不会有效。所以对于任何大于 2147483647 的数字,双非位运算符 (~~) 都会给出错误的结果,这种情况下推荐使用 Math.floor() 方法。如果当前属性包含一个对象,然后要将当前属性值作为参数递归调用相同的方法(例如,嵌套的对象)。如果有一个单级对象,例如没有嵌套的对象,那么我们也可以使用扩展符来实现深拷贝。方法来得到一个数字的幂。
2023-03-03 09:34:27
11
原创 Vue项目api层实现api数据缓存
首先就是有个全局的对象用来存储数据,然后讲请求过的接口存储到该对象,然后再次请求时,先判断该是否有数据,有的话,从该对象中获取,否则发送请求。为了防止数据量过大,我们需要设置缓存的最大个数,因此我们每当存储一个接口的数据的时候,将该接口名存储到一个数组中,当数组个数超出时,按先进先出的规则,去除数据。api缓存,顾名思义,就是请求接口返回的数据,我们将他缓存起来,然后下次请求的相同接口的时候就无需请求,直接从缓存中获取即可。——————system-api.js //系统管理模块相关api。
2023-03-03 09:34:13
97
原创 了解SSR并实现简单的SSR实例
后端先调用数据库,获得数据之后,将数据和页面元素进行拼装,组合成完整的html页面,再直接返回给浏览器,以便用户使用。数据由浏览器通过ajax动态获取,在通过JS将数据填充到dom元素上最终展示到网页中,这样的过程叫做客户端渲染。
2023-03-03 09:33:44
54
原创 VUE项目利用Axios实现好用的API层请求接口封装
这样就实现了代码结构清晰,使用方便的目的,但是此时是存在不足的,比如点击一个按钮发送请求时,当网络不好,用户疯狂点击按钮时,就会疯狂发送请求,从而影响用户体验及系统性能。——common-axios.js //请求拦截和响应拦截处理处 对外暴露一个 axios。然后system-api.js下的请求,改为global-request这个暴露出来的请求即可。———system-api.js //系统管理相关接口文件。——index.js //对外暴露module模块下的方法。
2023-03-03 09:33:26
59
腾讯云_即时通信_IM
2022-07-13
腾讯云_即时通信_IM
2022-07-13
前端大文件上传 + 断点续传解决方案
2022-05-26
基于 vue + element-ui 的后台管理系统
2022-05-20
基于 vue2 + vuex 构建一个具有 45 个页面的大型单页面应用
2022-05-20
vue源码逐行注释分析+40多m的vue源码程序流程图思维导图
2022-05-20
2022-综合资讯网站(PC完整版-开箱即用)
2022-05-16
仿抖音直播源码.zip
2021-12-06
2021大屏数据可视化源码-viewdata.zip
2021-11-30
基于 vue2 + vuex 构建一个具有 45 个页面的大型单页面应用.zip
2021-10-25
wxParse-微信小程序富文本解析自定义组件,支持HTML及markdown解析.zip
2021-10-25
2021最新微信小程序商城微信小程序微店源码+直播带货支持+ 充值+会员卡功能+.zip
2021-10-25
2021最新三套源码Vue版,React版,后台系统+node+express+mysql后台系统.zip
2021-10-25
虚机搭配NLB负载平衡时碰到 没有接口可用于安装新的群集 的解决方案
2021-10-25
TA创建的收藏夹 TA关注的收藏夹
TA关注的人