超赞!让 vue 开发效率翻倍的工具分享
![超赞!让vue开发效率翻倍的工具分享](https://static001.geekbang.org/infoq/56/5679121e79e15fef5edfbfaeb22c8c2a.jpeg)
分享一个很实用的工具库 VueUse,它是基于 Vue Composition Api,也就是组合式 API。支持在 Vue2 和 Vue3 项目中进行使用,据说是目前世界上 Star 最高的同类型库之一。
![](https://static001.geekbang.org/infoq/77/7799d6c2dede5d20da36fd68cc964e96.png)
它的初衷就是将一切原本并不支持响应式的 JS API 变得支持响应式,省去程序员自己写相关代码。
官方地址:https://vueuse.org/ 中文地址:https://www.vueusejs.com/ github:https://github.com/vueuse/vueuse
功能目录:
![](https://static001.geekbang.org/infoq/9e/9e023f623a5d61416bd711ed19d1405a.gif)
功能演示:
1、白天黑夜模式切换
![](https://static001.geekbang.org/infoq/3d/3db3d7289990c2ed211d22f41a25b11b.gif)
2、使元素可拖拽
![](https://static001.geekbang.org/infoq/13/134107e7cc6204cb2c879463ec5d382c.gif)
3、元素尺寸大小响应式
![](https://static001.geekbang.org/infoq/ad/ad629569f1a24bf9a1f81d49f39a521b.gif)
4、响应式获取鼠标相对于元素的位置
![](https://static001.geekbang.org/infoq/87/8727906ec34f832d22f4cdc0fe5cf1af.gif)
5、剪贴板
![](https://static001.geekbang.org/infoq/55/554a4352c520a939292c4e55bd349e2b.gif)
6、使用吸管工具吸取颜色
![](https://static001.geekbang.org/infoq/4c/4c280c5ab1268e52723398614fc40dd3.gif)
7、选择文件
![](https://static001.geekbang.org/infoq/ff/ff0527ce860fbefb56571888fa7ffe47.gif)
8、手动触发的 watch
![](https://static001.geekbang.org/infoq/23/2321840aa098364a1c9f752dfcab3f33.gif)
总结:
使用 VueUse 你只需要短短几行代码即可实现复杂的效果。系统所需要的功能它都早已经为我们准备好了。关于它的更多操作,就不再一一演示,有兴趣的朋友可以移步到官网查看。
相关内容拓展:(技术前沿)
近 10 年间,甚至连传统企业都开始大面积数字化时,我们发现开发内部工具的过程中,大量的页面、场景、组件等在不断重复,这种重复造轮子的工作,浪费工程师的大量时间。
针对这类问题,低代码把某些重复出现的场景、流程,具象化成一个个组件、api、数据库接口,避免了重复造轮子。极大的提高了程序员的生产效率。
介绍一款程序员都应该知道的软件 JNPF 快速开发平台,基于 Java/.Net 双技术引擎,专注于低代码,采用业内领先的 SpringBoot 微服务架构、支持 SpringCloud 模式,完善了平台的扩增基础,满足了系统快速开发、灵活拓展、无缝集成和高性能应用等综合能力;采用前后端分离模式,前端和后端的开发人员可分工合作负责不同板块,省事又便捷。
免费体验官网:https://www.jnpfsoft.com/?infoq
评论