插件
网络请求
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-resizable 、 vue3-draggable-resizable
用于拖拽调整位置和大小的的组件,同时支持冲突检测,元素吸附对齐,实时参考线。
传送门:
Vuex持久化存储
vuex-persistedstate
传送门:
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
传送门:
图片裁剪
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-canvas ( 100px.net/ )
基于 JS + Canvas 实现的【大转盘 & 九宫格 & 老虎机】抽奖,致力于为 WEB 前端提供一个功能强大且专业可靠的营销组件,只需要通过简单配置即可实现自由化定制,帮助你快速的完成产品需求
轮播图幻灯片
Swiper
Swiper常用于移动端网站的内容触摸滑动。Swiper 是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。
图片的全屏预览
v-viewer
vue的图像查看器组件,支持旋转、缩放、缩放等,基于viewer.js
右键菜单
vue-contextmenujs
Vue 原生实现右键菜单组件, 零依赖
传送门:
虚拟列表
vue-virtual-scroller
目前虚拟列表已经有很多知名的库,如 vue-virtual-scroller、vue-virtual-scroll-list、react-virtualized 等,
传送门:
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打补丁
传送门:
打印
vue-plugin-hiprint
hiprint for Vue2/Vue3 ⚡打印、打印设计、可视化设计器、报表设计、元素编辑、可视化打印编辑
传送门:
lodop
二维码生成器
uqrcodejs
uQRCode是一款基于Javascript环境开发的二维码生成插件,适用所有Javascript运行环境的前端应用和Node.js应用。uQRCode可扩展性高,它支持自定义渲染二维码,可通过uQRCode API得到二维码绘制关键信息后,使用canvas、svg或js操作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
vite下部分插件使用
传送门:www.jianshu.com/p/d45ae4b5c…
uniapp 组件库
图片上传压缩
Compress
可指定大小 Cavans 压缩图片,等比例压缩图片 可指定图片宽高,兼容 H5 和 小程序。
调试
vconsole
一个轻量、可拓展、针对手机网页的前端开发者调试面板,现在 vConsole 是微信小程序的官方调试工具,vConsole 是框架无关的,可以在 Vue、React 或其他任何框架中使用。
node 修改插件
图片上传压缩
compress
Node.js 有一个内置 child_process 模块。它提供了一些方法,允许我们编写在子进程中运行命令的脚本。
这些命令可以运行安装在我们运行脚本的机器上的任何程序。
execa 为
child_process模块提供了一个包装器,以便于使用。
inquirer
inquirer
公共交互式命令行用户界面的集合。
传送门: Inquirer.js
ora
ora
ora包用于显示加载中的效果,类似于前端页面的loading效果。
工具库
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组件用于粒子背景
传送门:
动画
mojs
mo.js,一个轻量级的JavaScript动画库,为前端开发者提供了一种简单而强大的方法来创建引人注目的动画效果。
传送门:
模拟器
Android studio
Android Studio 是谷歌推出的一个Android集成开发工具,基于IntelliJ IDEA. 类似 Eclipse ADT,Android Studio 提供了集成的 Android 开发工具用于开发和调试。