插件、工具库

2,740 阅读11分钟

插件

网络请求

fetch-event-source

fetch-event-source通过增强SSE的功能,为前端开发者提供了灵活且高效的实时数据流解决方案。其优势在实时聊天、新闻更新、AI内容生成等场景中尤为明显。此外,其页面可见性优化、现代浏览器兼容性以及对复杂请求的支持,使得fetch-event-source成为当前SSE开发的首选工具。

拖拽

vue.draggable-es

Vue.Draggable是一款基于Sortable.js实现的vue拖拽插件。支持移动设备、拖拽和选择文本、智能滚动,可以在不同列表间拖拽、不依赖jQuery为基础、vue 2过渡动画兼容、支持撤销操作,总之是一款非常优秀的vue拖拽组件。

传送门:

vue.draggable中文文档

Vue.Draggable使用文档总结

vue-draggable-resizable 、 vue3-draggable-resizable

用于拖拽调整位置和大小的的组件,同时支持冲突检测,元素吸附对齐,实时参考线。

传送门:

vue-draggable-resizable

vue3-draggable-resizable

Vuex持久化存储

vuex-persistedstate

传送门:

vuex持久化存储

Pinia持久化存储

pinia-plugin-persistedstate

pinia-plugin-persist

pinia-plugin-persist-uni

下拉刷新、上拉加载

z-paging (推荐)

一个uni-app分页组件。
全平台兼容,支持自定义下拉刷新、上拉加载更多,支持虚拟列表,支持自动管理空数据图、点击返回顶部,支持聊天分页、本地分页,支持展示最后更新时间,支持国际化等等。

mescroll

mescroll -- 精致的下拉刷新和上拉加载js框架

滚动组件

vue3-seamless-scroll

全新升级无缝滚动组件,改为虚拟列表的方式渲染,支持大数据滚动,可以分页请求无限数据滚动更多使用方式看例子

vue2使用  vue-seamless-scroll

滑动验证码

vue-monoplasty-slide-verify

滑动验证码

将任意 DOM 节点转换为矢量(SVG)或光栅(PNG 或 JPEG)图像

html-to-image

传送门:

html-to-image+vue截图

图片裁剪

vue-cropper

一个优雅的图片裁剪插件

传送门:

Vue 如何快速实现头像裁剪?

vue-cropper

图片上传进行压缩

image-conversion

image-conversion是一个简单易用的 JS图像转换工具(源码用 ts 编写),它提供了许多方法来在image,Canvas,File和dataURL之间进行转换,图像转换可以指定压缩图像的大小。

in CommonJS:

    const imageConversion = require("image-conversion")

in ES6:

    import * as imageConversion from 'image-conversion';

or

    import {compress, compressAccurately} from 'image-conversion';

图片批量压缩

baize-compress-image

对图片进行压缩的工具,它通过 web worker、离屏 canvas 等方式对图片进行压缩,加快压缩的效率。 并且支持多 worker 批量压缩多个图片,不会影响主线程的渲染,有效提升用户体验。

在线地址

【大转盘 & 九宫格】抽奖插件

lucky-canvas100px.net/

基于 JS + Canvas 实现的【大转盘 & 九宫格 & 老虎机】抽奖,致力于为 WEB 前端提供一个功能强大专业可靠的营销组件,只需要通过简单配置即可实现自由化定制,帮助你快速的完成产品需求

轮播图幻灯片

Swiper

Swiper常用于移动端网站的内容触摸滑动。Swiper 是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。

图片的全屏预览

v-viewer

vue的图像查看器组件,支持旋转、缩放、缩放等,基于viewer.js

juejin.cn/post/707977…

www.npmjs.com/package/v-v…

右键菜单

vue-contextmenujs

Vue 原生实现右键菜单组件, 零依赖

传送门:

1分钟实现右键菜单

vue-contextmenujs

虚拟列表

vue-virtual-scroller

目前虚拟列表已经有很多知名的库,如 vue-virtual-scrollervue-virtual-scroll-listreact-virtualized 等,

传送门:

虚拟列表

vue-virtual-scroller

vue3-infinite-list

vue3-infinite-list 体积小 & 零依赖 – gzipped 后只有 3kb,支持百万级列表渲染, 不费吹灰之力,支持滚动到指定条目 和 指定初始滚动偏移量,支持固定 和 可变 宽/高的各类列表,支持垂直 or 水平 不同布局的列表,For Vue3 typescript编写,使用简单可以结合各类UI库使用,兼容vue2。

Numeral.js

Numeral.js是一款用于格式化和操作数字的JavaScript库。

Nzh

Nzh 适用于需要转换阿拉伯数字中文数字的场景。

特点如下:

  • 以字符串的方式转换,没有超大数及浮点数等问题(请自行对原数据进行四舍五入等操作)
  • 支持科学记数法字符串的转换
  • 支持口语化
  • 支持自定义转换(不论是,还是都可以用)
  • 对超大数支持用争议较少的万万亿代替亿亿
  • 当然,你还可以把中文数字再转回阿拉伯数字

功能全面、多端支持的汉字拼音笔画

cnchar

功能全面、多端支持的汉字拼音笔画js库。

修改node_modules

patch-package

给node_modules打补丁

传送门:

第三方包补丁方案(优雅修改node_modules)

patch-package

打印

vue-plugin-hiprint

hiprint for Vue2/Vue3 ⚡打印、打印设计、可视化设计器、报表设计、元素编辑、可视化打印编辑

传送门:

hiprint官方文档

lodop

二维码生成器

uqrcodejs

uQRCode是一款基于Javascript环境开发的二维码生成插件,适用所有Javascript运行环境的前端应用和Node.js应用。 uQRCode可扩展性高,它支持自定义渲染二维码,可通过uQRCode API得到二维码绘制关键信息后,使用canvassvgjs操作dom的方式绘制二维码图案。还可自定义二维码样式,如随机颜色、圆点、方块、块与块之间的间距等。

二维码解析器

qrcode-parser

一个纯javascript二维码解码库,接受PNG文件对象,PNG图片url,图片base64。

抓包

whistle

whistle基于Node实现的跨平台web调试代理工具,类似的工具有Windows平台上的Fiddler,主要用于查看、修改HTTP、HTTPS、Websocket的请求、响应,也可以作为HTTP代理服务器使用,不同于Fiddler通过断点修改请求响应的方式,whistle采用的是类似配置系统hosts的方式,一切操作都可以通过配置实现,支持域名、路径、正则表达式、通配符、通配路径等多种匹配方式,且可以通过Node模块扩展功能

将 html 转换成 Canvas

wxml2canvas

wxml元素转换成canvas元素。

Painter

小程序生成图片库,轻松通过 json 方式绘制一张可以发到朋友圈的图片。

中国省市区三级联

element-china-area-data

中国省市区级联数据。

前端 Excel 导入和导出功能

xlsx

将 json 数据导出为 Excel 文件,将 Excel 文件 解析成为 json。

视频制作

ffcreator

FFCreator是一个基于node.js的轻量、灵活的短视频加工库。您只需要添加几张图片或视频片段再加一段背景音乐,就可以快速生成一个很酷的视频短片。视频制作速度极快,一个 5 分钟的视频只需要 1-2 分钟。支持近百种场景炫酷过渡动画效果。支持图片、声音、视频剪辑、文本等元素。支持字幕组件、可以将字幕与语音 tts 结合合成音频新闻。支持图表组件,可以制作数据可视化类视频。支持简单(可扩展)的虚拟主播,您可以制作自己的虚拟主播。包含animate.css90%的动画效果,可以将 css 动画转换为视频。

uuid

UUID 是一个用于创建 RFC4122 通用唯一标识符的库。

海报(canvas)

vue-canvas-poster-fixleft

Vue Canvas Poster 一个通过 css 属性画 canvas 图片的轻量级的 vue 组件。

@ubbcou/vue-canvas-poster

vue-canvas-poster 的 vue3版本。

vue-canvas-poster-yufan

一个基于vue+canvas通过类CSS数据生成canvas图片的组件。

本地 服务器

http-serve

http-server是一个简单的、零配置的命令行静态HTTP服务器。它足够强大,可用于生产使用,但也足够简单,可用于测试、本地开发和学习。

npm i -g http-server   // 再全局安装`npm i -g http-server`启动服务。
cd examples  // 进入文件
http-server .  // 启动该文件中的 index.html 文件

http-server -p 8081 .  // 如果碰到端口被占用,也可以指定端口

// 这样就能在 http://localhost:8080/ 打开 index.html 页面了。

json代码格式化(高亮)

vue-json-pretty

image.png

vite下部分插件使用

传送门:www.jianshu.com/p/d45ae4b5c…

uniapp 组件库

图片上传压缩

Compress

可指定大小 Cavans 压缩图片,等比例压缩图片 可指定图片宽高,兼容 H5 和 小程序。

调试

vconsole

一个轻量、可拓展、针对手机网页的前端开发者调试面板,现在 vConsole 是微信小程序的官方调试工具,vConsole 是框架无关的,可以在 Vue、React 或其他任何框架中使用。

传送门:uniApp 使用 vconsole

node 修改插件

图片上传压缩

compress

child_process 子进程

Node.js 有一个内置 child_process 模块。它提供了一些方法,允许我们编写在子进程中运行命令的脚本。
这些命令可以运行安装在我们运行脚本的机器上的任何程序。

execa 为 child_process 模块提供了一个包装器,以便于使用。

传送门: 在 Node 中使用 execa 运行命令

inquirer

inquirer

公共交互式命令行用户界面的集合。

传送门: Inquirer.js

ora

ora

ora包用于显示加载中的效果,类似于前端页面的loading效果。

image.png

工具库

pinyin-pro

专业的拼音转换工具

一个识别准确、性能优异的汉字拼音转换库。

VueUse

Vue 合成实用程序的集合。

VueHooks Plus

Vue3 的 Hooks ,基础和高级的 hook, 高性能逻辑的抽象封装,满足大量场景。

传送门:http://43.138.187.142:9000/vue-hooks-plus/docs/

ahooks

ahooks,是一套高质量可靠的 React Hooks 库。在当前 React 项目研发过程中,一套好用的 React Hooks 库是必不可少的,希望 ahooks 能成为您的选择。

tailwindcss

一个实用程序优先的CSS框架,它包含了' flex '、' pt-4 '、' text-center '和' rotate-90 '等类,可以直接在标记中构建任何设计。

windicss

如果你已经熟悉了 Tailwind CSS,可以把 Windi CSS 看作是按需供应的 Tailwind 替代方案,它为你提供了更快的加载体验,完美兼容 Tailwind v2.0,并且拥有很多额外的酷炫功能。

@dcasia/mini-program-tailwind-webpack-plugin

微信小程序本身不支持由 Tailwind/Windi CSS 产生的选择器名称中包含的一些特殊转义字符(如 [ ! . 等),可以使用 @dcasia/mini-program-tailwind-webpack-plugin 插件可以使其支持,但是使用了该插件如果打包成 H5 会出现样式错误、样式失效。如果该套代码需要在 微信小程序、H5 平台使用,不建议使用 Tailwind/Windi CSS,如果现在想使用的话,可以在打包微信小程序的时候才使用该插件,打包H5的时候不使用该插件。

Moment.js

JavaScript 日期处理类库。

Day.js

一个极简的处理时间和日期的 JavaScript 库,和 Moment.js 的 API 设计保持一样, 但体积仅有2KB。

qs

一个轻量的 url 参数转换的 JavaScript 库。

js-cookie

一个简单的、轻量的处理 cookies 的 js API。

flv.js

bilibili 开源的 html5 flash 视频播放器,使浏览器在不借助 flash 插件的情况下可以播放 flv,目前主流的直播、点播解决方案。

vConsole

一个轻量、可拓展、针对手机网页的前端开发者调试面板。如果你还苦于在手机上如何调试代码,用它就对了。

eruda

eruda能在页面生成一个控制台,你可以看接口数据,也可以打印数据,可以看到本地存储,大大方便了移动端的调试工作。

Animate.css

一个跨浏览器的 css3 动画库,内置了很多典型的 css3 动画,兼容性好,使用方便。

animejs

一款功能强大的 Javascript 动画库。可以与CSS3属性、SVG、DOM元素、JS对象一起工作,制作出各种高性能、平滑过渡的动画效果。

lodash.js

一个一致性、模块化、高性能的 JavaScript 实用工具库。

lodash-es 是 lodash 的 es modules 版本,体积也更小。

mescroll.js

一款精致的、在H5端运行的下拉刷新和上拉加载插件,主要用于列表分页、刷新等场景。

mescroll-uni

mescroll的uni版本 是专门用在uni-app的下拉刷新和上拉加载的组件, 支持一套代码编译到iOS、Android、H5、小程序等多个平台

Chart.js

一套基于 HTML5 的简单、干净并且有吸引力的 JavaScript 图表库。

传送门: Day.js、qs、js-cookie、flv.js、vConsole、Animate.css、animejs、lodash.js、mescroll.js、Chart.js 使用

特效 、样式

图片裁剪

vue-cropper

js组件用于粒子背景

1666253905366.png

传送门:

vue-cropper

动画

mojs

mo.js,一个轻量级的 JavaScript 动画库,为前端开发者提供了一种简单而强大的方法来创建引人注目的动画效果。

传送门:

mojs

模拟器

Android studio

Android Studio 是谷歌推出的一个Android集成开发工具,基于IntelliJ IDEA. 类似 Eclipse ADT,Android Studio 提供了集成的 Android 开发工具用于开发和调试。

传送门:juejin.cn/post/710667…