前端300+实用工具分享【转载】
本文内容来自 B 站 UP 主 @技术胖的视频:前端老司机 300+实用工具分享 若造成侵权请联系我进行删除。
Javascript
工具
- Underscore.js
一套完善的函数式编程的接口,更方便地在JavaScript中实现函数式编程
https://underscorejs.org/ - fastclick
用于消除物理点击和click移动浏览器上事件触发之间的 300 毫秒延迟
https://github.com/ftlabs/fastclick - Lodash
一致性、模块化、高性能的 JavaScript 实用工具库
https://lodash.com/ - crypto-js
加密标准的 JavaScript 库。
https://github.com/brix/crypto-js - zxcvbn
JavaScript密码强度估算库
https://github.com/dropbox/zxcvbn - zxcvbn-ts
支持Typescript的密码强度估算库
https://github.com/zxcvbn-ts/zxcvbn - clipboard.js
将文本复制到剪贴板的轻量级JS 库
https://clipboardjs.com/ - tesseract.js
Javascript的OCR引擎,在浏览器离线识别图片中的文字
https://tesseract.projectnaptha.com/ - number-precision
小而快的库,用于精确地进行加法、减法、乘法和除法运算
https://github.com/nefe/number-precision - fingerprintjs
具有高准确度和稳定性的浏览器指纹库
https://fingerprint.com/ - ViteShot
基于Vite的快速简单的截图工具。
https://viteshot.com/ - Valine
快速、简洁且高效的无后端评论系统
https://valine.js.org/ - cnpm
淘宝提供的一个完整 npmjs.org 镜像,你可以用此代替官方版本(只读),同步频率目前为 10分钟 一次以保证尽量与官方服务同步
https://npmmirror.com/ - yarn
快速、可靠和安全的依赖管理
https://yarnpkg.com/ - responsively-app
一种改进的 Web 浏览器,有助于响应式 Web 开发。Web 开发人员必须拥有开发工具
https://responsively.app/ - javascript-obfuscator
功能强大的免费 JavaScript 混淆器,包含多种功能,可为源代码提供保护
https://obfuscator.io/ - Nano ID
小巧的、安全的、URL 友好的、独特的 JavaScript 字符串 唯一 ID 生成器
https://zelark.github.io/nano-id-cc/ - spy-debugger
一站式页面调试、抓包工具。远程调试任何手机浏览器页面,任何手机移动端webview(如:微信,HybridApp等)。支持HTTP/HTTPS,无需USB连接设备
https://responsively.app/ - fuite
用于查找 Web 应用程序中的内存泄漏的工具
https://github.com/nolanlawson/fuite - qs
查询字符串解析和字符串化库
https://github.com/ljharb/qs - js-cookie
用于处理 cookie 的简单、轻量级 JavaScript API
https://github.com/js-cookie/js-cookie - tinymce
排名第一的可定制、可扩展和灵活的富文本编辑器
https://www.tiny.cloud/ - html2canvas
允许在用户浏览器上对网页或其部分进行“截图”
https://html2canvas.hertzen.com/ - shepherd
引导用户浏览您的应用
https://shepherdjs.dev/ - tinykeys
极小的键盘事件监听库
https://jamiebuilds.github.io/tinykeys/ - ag-grid
用于构建企业应用程序的最佳 JavaScript 数据表
https://www.ag-grid.com/ - tui.calendar
功能齐全的 JavaScript 日程表
https://ui.toast.com/tui-calendar - screenfull
用于跨浏览器使用 JavaScript Fullscreen API 的简单包装器
https://sindresorhus.com/screenfull/ - Fuse.js
JavaScript 中的轻量级模糊搜索
https://fusejs.io/ - i18next
用于浏览器或任何其他 javascript 环境(例如 Node.js、Deno)的国际化框架
https://www.i18next.com/ - JsBarcode
适用于 Web 和 Node.js 的易于使用但功能强大的条形码生成器
https://lindell.me/JsBarcode/ - path-to-regexp
将/user/:name
等路径字符串转换为正则表达式
https://github.com/pillarjs/path-to-regexp - await-to-js
异步等待包装器,无需 try-catch 即可轻松处理错误
https://blog.grossman.io/how-to-write-async-await-without-try-catch-blocks-in-javascript/ - md5
用 MD5 散列消息的 JavaScript 函数
https://github.com/pvorb/node-md5 - mitt.js
它足够小,仅有200bytes,其次支持全部事件的监听和批量移除,替代EventBus
https://npm.im/mitt - js-spark-md5
MD5 算法的快速 md5 实现
https://github.com/satazor/js-spark-md5 - nano
小型(130 字节)、安全、URL 友好、唯一的 JavaScript 字符串 ID 生成器
https://zelark.github.io/nano-id-cc/ - jsPDF
用 JavaScript 生成 PDF
https://parall.ax/products/jspdf - ua-parser-js
从User-Agen中检测浏览器、引擎、操作系统、CPU 和设备类型/型号,占用空间相对较小(压缩后约 17KB,压缩后约 6KB),支持浏览器和 node.js 环境
http://faisalman.github.io/ua-parser-js/ - togetherjs
网站添加实时协作功能的JavaScript库,两个人可以在同一页面上进行交互,查看彼此的光标、编辑并一起浏览网站
https://togetherjs.com/ - Clusterize.js
开源的长列表渲染库,轻量级的原生大数据量展示
https://clusterize.js.org/ - crypto-js-wasm
加密标准的 javascript 库,比 crypto-js快16 倍
https://github.com/originjs/crypto-js-wasm - pdfkit
用于 Node 和浏览器的 JavaScript PDF 生成库
http://pdfkit.org/ - zx
使用js编写更便捷shell脚本
https://www.npmjs.com/package/zx - NProgress.js
适用于应用程序的进度条,受 Google、YouTube 和 Medium 的启发
https://ricostacruz.com/nprogress/
可视化
- highlight.js
JavaScript 语法高亮器,具有语言自动检测和零依赖项
https://highlightjs.org/ - Drawflow
创建简单的流程库
https://jerosoler.github.io/Drawflow/ - tui.image-editor
HTML5 Canvas 的全功能图像编辑器。它易于使用并提供强大的过滤器
https://ui.toast.com/tui-image-editor - viewerjs
JavaScript 图像查看器
https://fengyuanchen.github.io/viewerjs/ - prism.js
轻量级、健壮、优雅的语法高亮库
https://prismjs.com/ - fabric.js
功能强大且简单的 Canvas库,轻松处理 HTML5 画布元素。是画布元素之上的交互式对象模型,也是一个SVG-to-canvas 解析器
http://fabricjs.com/ - fullPage.js
用于创建全屏滚动网站(也称为单页网站或一页网站),并在该网站的各个部分内添加横向滑块
https://alvarotrigo.com/fullPage/ - opentype.js
OpenType 和 TrueType 字体解析器和编写器。它允许您从浏览器或 node.js访问文本的字母形式
https://opentype.js.org/ - icones.js
具有即时搜索功能的图标资源管理器,由 Iconify 提供支持
https://icones.js.org/ - reveal.js
创建功能齐全且精美的演示文稿
https://revealjs.com/ - carbon
创建和共享源代码的精美图像
https://carbon.now.sh/ - lucky-canvas
基于 TS + Canvas 开发的【大转盘 / 九宫格 / 老虎机】抽奖插件, 一套源码适配多端框架 JS / Vue / React / Taro / UniApp / 微信小程序等
https://100px.net/ - Darkmode.js
在几秒钟内为您的网站添加暗模式/夜间模式
https://darkmodejs.learn.uno/?_360safeparam=8406218 - ECharts
强大的交互式图表和浏览器数据可视化库
https://echarts.apache.org/zh/index.html - PixiJS
使用最快,最灵活的2D WebGL渲染器创建精美的内容
https://pixijs.com/ - AntV - G2
数据驱动,高度易用,可扩展的可视化图形语法。
https://g2plot.antv.vision/zh/ - ApexCharts.js
基于SVG的JavaScript图表库,可使用简单的API构建交互式图表和可视化文件 - OpenLayers
高性能,功能丰富的库,用于在Web上创建交互式地图。它可以显示从任何网页上的任何来源加载的地图图块,矢量数据和标记
https://openlayers.org/ - Two.js
面向现代Web浏览器的二维绘图api,渲染不可知实现相同的API在多种环境中得出:svg,canvas,和webgl
https://two.js.org/ - Paper.js
基于HTML5 Canvas的矢量图形的图形库
http://paperjs.org/ - Panolens.js
事件驱动的基于WebGL的全景查看器。轻巧而灵活。它建立在Three.JS之上
https://pchen66.github.io/Panolens/ - A-Frame
用于构建 3D/AR/VR 体验的 Web 框架
https://aframe.io/ - mermaid-js
以与 Markdown 类似的方式从文本生成图表和流程图
https://mermaid-js.github.io/mermaid/ - mo · js
为网站添加基于JavaScript的动态图形
https://mojs.github.io/ - trianglify
Javascript 库,用于创建独特的、美观的三角形图案
http://qrohlf.com/trianglify/ - Babylon.js
能强大、美观、简单、开放的游戏和渲染引擎
https://www.babylonjs.com/ - Oasis Engine
高性能 Web 蚂蚁图形引擎
https://oasisengine.cn/ - Butterfly
基于JS的数据驱动的节点式编排组件库
https://butterfly-dag.gitee.io/butterfly-dag/home - image-optimizer
使用 Electron、Vue 和 Vite 用于优化图像和矢量图形的免费开源工具
https://github.com/antonreshetov/image-optimizer - Sketchfab
需任何插件即可在Web页面里嵌入交互式3D模型
https://sketchfab.com/ - vConsole
用于移动网页的轻量级、可扩展的前端开发工具
https://github.com/Tencent/vConsole - swiper
免费且最现代的移动触摸滑块,具有硬件加速过渡和惊人的原生行为
https://swiperjs.com/ - Slidev
面向开发人员的演示幻灯片
https://sli.dev/ - konva
HTML5 Canvas JavaScript 框架,它支持桌面和移动应用程序的高性能动画、过渡、节点嵌套、分层、过滤、缓存、事件处理等等
https://konvajs.org/ - p5.js
开源的JavaScript可视化库,processing的js实现版本
https://p5js.org/zh-Hans/ - cesium
用于世界级 3D 地球仪和地图的开源 JavaScript 库
https://cesium.com/platform/cesiumjs/ - driver.js
一个轻量级、无依赖的用户引导组件
https://kamranahmed.info/driver.js/ - vanilla-tilt.js
平滑的 3D 倾斜 JavaScript 库
https://micku7zu.github.io/vanilla-tilt.js/index.html - parallax.js
对智能设备的方向引擎响应的视差
http://matthew.wagerfield.com/parallax/ - signature_pad
基于 HTML5 canvas 的平滑签名绘制
http://szimek.github.io/signature_pad/ - compressorjs
JavaScript 图像压缩器
https://fengyuanchen.github.io/compressorjs/ - eva.js
用于创建交互式游戏项目的前端游戏引擎
https://eva.js.org/ - d3
基于数据来操作文档的JavaScript库
https://d3js.org/
动画插件
- countUp.js
无依赖项的轻量级Javascript类,可用于快速创建以更有趣的方式显示数字数据的动画
https://inorganik.github.io/countUp.js/ - impress.js
CSS3 转换和过渡的强大功能的演示框架
https://impress.js.org/ - Anime.js
轻量级的 JavaScript 动画库,具有简单而强大的 API
https://animejs.com/ - tween.js
用于简单动画的 JavaScript 补间引擎,包含优化的 Robert Penner 方程
http://tweenjs.github.io/tween.js/ - Popmotion
制作数字、颜色和复杂字符串的动画。该库的主要动画功能只有5kb左右,整个库的容量在12kb左右
https://popmotion.io/ - Typed.js
打字动画库
https://mattboldt.com/demos/typed-js/ - vivus.js
在 SVG 上制作绘图动画的 JavaScript 库
https://maxwellito.github.io/vivus/ - ScrollReveal
在元素滚入或滚出视口时为其制作动画
https://scrollrevealjs.org/ - canvas-confetti
按需 五彩纸屑
https://catdad.github.io/canvas-confetti/ - GSAP
强大的 JavaScript 工具集,构建适用于所有主流浏览器的高性能动画。动画 CSS、SVG、画布、React、Vue、WebGL、颜色、字符串、运动路径、通用对象
https://greensock.com/ - lax.js
轻量级(<4kb gzipped)香草 JavaScript 库,可在您滚动时创建流畅美观的动画
https://github.com/alexfoxy/lax.js - animxyz
AnimXYZ 可帮助您为您的网站创建、自定义和组合动画
https://animxyz.com/ - svg.js
用于操作和动画 SVG 的轻量级库
https://svgjs.dev/docs/3.0/ - zdog
用于画布和 SVG 的扁平、圆形、设计师友好的伪 3D 引擎
https://zzz.dog/ - dynamics.js
用于创建基于物理的动画的 JavaScript 库
http://dynamicsjs.com/ - Proton
Javascript粒子动画库
https://drawcall.github.io/Proton/
文件操作
- SheetJS
可读取和导出excel的工具库,功能强大,支持格式众多,支持xls、xlsx、ods(一种OpenOffice专有表格文件格式)等十几种格式
https://sheetjs.com/ - revogrid
具有高级定制功能的强大虚拟数据表格
https://revolist.github.io/revogrid/ - FileSaver.js
客户端保存文件的解决方案
https://eligrey.com/blog/saving-generated-files-on-the-client-side/ - jszip
使用 Javascript 创建、读取和编辑 .zip 文件
https://stuk.github.io/jszip/ - Print.js
帮助从网络打印的小型 javascript 库
https://printjs.crabbly.com/ - mammoth.js
将 Word 文档(.docx 文件)转换为 HTML
https://github.com/mwilliamson/mammoth.js - StreamSaver.js
直接异步将流写入文件系统,适合大文件下载
https://jimmywarting.github.io/StreamSaver.js/example.html - PDF.js
使用 HTML5 构建的可移植文档格式 (PDF) 查看器
https://github.com/mozilla/pdf.js - pdfmake
用于服务器端和客户端的 PDF 文档生成库
http://pdfmake.org/ - pdf-lib
在任何 JavaScript 环境中创建和修改 PDF 文档
https://pdf-lib.js.org/ - uppy
JavaScript 文件上传器
https://uppy.io/
音视频
- moovie.js
专注于电影的 HTML5 播放器
https://mooviejs.com/ - meyda.js
JavaScript 音频特征提取库
https://meyda.js.org/ - howler.js
Javascript 音频库
https://howlerjs.com/ - flv.js
HTML5 FLV 播放器
https://github.com/Bilibili/flv.js/ - plyr
HTML5、YouTube 和 Vimeo 播放器
https://plyr.io/ - xgplayer 西瓜播放器
网络视频和音频播放器库
https://h5player.bytedance.com/ - hls.js
可在支持 MSE 的浏览器中播放 HLS
https://hls-js.netlify.app/demo/
智能化
- tensorflow.js
用于在浏览器和 Node.js 训练和部署机器学习模型
https://tensorflow.google.cn/ - face-api.js
用于在浏览器和 nodejs 中使用 tensorflow.js 进行人脸检测和人脸识别的 JavaScript API
https://github.com/justadudewhohacks/face-api.js/ - tracking.js
将不同的计算机视觉算法和技术引入浏览器环境。通过使用现代HTML5规范,我们使您能够进行实时颜色跟踪,人脸检测等
https://trackingjs.com/ - pose-animator
识别出人类的表情变化和肢体动作,并将其映射到2D矢量图型上
https://github.com/yemount/pose-animator - ar-cutpaste
手机上预装工具,对着目标物体拍摄,即可将图像复制粘贴进 Photoshop
https://github.com/cyrildiagne/ar-cutpaste - imgcook
专注以 Sketch、PSD、静态图片等形式的视觉稿作为输入,通过智能化技术一键生成可维护的前端代码
https://www.imgcook.com/ - nsfwjs
帮助快速识别不合时宜的图像
https://nsfwjs.com/
编辑器
- Vditor
Markdown 编辑器,支持所见即所得、即时渲染(类似 Typora)和分屏预览模式,由 TypeScript 实现,支持原生 JavaScript、Vue、React、Angular,提供桌面版
https://b3log.org/vditor/ - monaco-editor
为VS Code提供支持的代码编辑器
https://microsoft.github.io/monaco-editor/ - bytemd
用 Svelte 构建的 Markdown 编辑器组件。它也可以用于其他库/框架,例如 React、Vue 和 Angular
https://bytemd.netlify.app/ - wangEditor
Typescript 开发的 Web 富文本编辑器, 轻量、简洁、易用、开源免费
https://www.wangeditor.com/ - mavonEditor
Markdown 编辑器,支持多种个性化功能
http://www.mavoneditor.com/ - quill
API 驱动的富文本编辑器
https://quilljs.com/ - codemirror5
浏览器内代码编辑器
https://codemirror.net/ - marked
用于解析 Markdown 的编译器
https://marked.js.org/ - tiptap
完全控制文本编辑器体验。它是可定制的,带有大量扩展,是开源的,并且有大量的文档
https://tiptap.dev/
2D 3D
- dat.gui
在 JavaScript 中更改变量的轻量级图形用户界面
https://github.com/dataarts/dat.gui - Three.js
易于使用、轻量级、跨浏览器的通用 3D 库
https://threejs.org/ - Draco 3D
缩和解压缩 3D 几何网格和点云。它旨在改进 3D 图形的存储和传输
https://google.github.io/draco/ - stats.js
JavaScript 性能监视器
http://mrdoob.github.io/stats.js/ - matter-js
一个用于 web 的 JavaScript 2D 物理引擎
https://brm.io/matter-js/ - Oimo.js
用于 javascript 的轻量级 3d 物理引擎,是OimoPhysics
的完整 javascript 转换
http://lo-th.github.io/Oimo.js/#basic - ammo.js
使用 Emscripten 将 Bullet 物理引擎直接移植到 JavaScript
https://github.com/kripken/ammo.js
其他常用
- Auto.js Pro
Android上支持Node.js的JavaScript自动化和编程软件
https://pro.autojs.org/ - Inquirer.js
实现命令行交互式界面的工具集合
https://github.com/SBoudrias/Inquirer.js/ - chalk
命令行美化工具
https://github.com/chalk/chalk - Timer.js
简单而轻量级的库,无需任何依赖项来创建和管理计时器
https://github.com/husa/timer.js - day.js
极简的 JavaScript 库,它使用与 Moment.js 兼容的 API 为现代浏览器解析、验证、操作和显示日期和时间
https://day.js.org/ - Socket.io
支持基于事件的实时双向通信
https://socket.io/ - The Algorithms
GitHub 最大的开源算法库
https://the-algorithms.com/ - log-symbols
各种日志级别的彩色符号
https://github.com/sindresorhus/log-symbols - plop
微型生成器框架,使整个团队可以轻松地创建具有一定一致性的文件
https://plopjs.com/ - prompts
轻量级、美观且用户友好的交互式提示
https://github.com/terkelg/prompts - shelljs
基于 Node.js API 的 Unix shell 命令的可移植(Windows/Linux/macOS)实现
https://www.npmjs.com/package/shelljs - figlet
浏览器控制台个性化输出
https://github.com/patorjk/figlet.js - picocolors
终端修改输出字符样式的 npm 包,比 chalk 体积小 14 倍,速度快 2 倍
https://github.com/alexeyraspopov/picocolors - cac
用于构建 CLI 应用程序的 JavaScript 库,体积数倍小于 commander 和 yargs
https://github.com/cacjs/cac - npm-run-all
用于并行或顺序运行多个 npm 脚本的 CLI 工具
https://github.com/mysticatea/npm-run-all - node-semver
语义化版本号管理的 npm 库,比如 判断一个版本是否合法,判断版本号命名是否正确,两个版本谁大谁小之类 等
https://github.com/npm/node-semver - puppeteer
在浏览器中手动执行的大多数操作都可以使用 Puppeteer 完成
生成页面的屏幕截图和 PDF。
抓取 SPA(单页应用程序)并生成预渲染内容
自动化表单提交、UI 测试、键盘输入等。
https://pptr.dev/ - temir
用vue组件来编写命令行界面应用的工具
https://github.com/webfansplz/temir - enquirer
适用于 Node.js 的时尚、直观且用户友好的提示
https://github.com/enquirer/enquirer
跨平台
框架
- uni-app
使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序等13个平台
https://uniapp.dcloud.io/ - react-native
使用 React 构建移动应用程序
https://reactnative.dev/ - Flutter
Google 的开源框架,用于构建美观、本机编译的多平台应用程序
https://flutter.dev/ - chameleon
一套代码运行多端,一端所见即多端所见
http://cml.didi.cn/ - Taro
遵循 React 语法规范的多端统一开发框架
https://taro.zone/ - Electron
使用 JavaScript,HTML 和 CSS 构建跨平台的桌面应用程序
https://www.electronjs.org/ - MicroApp
京东零售推出的微前端框架。基于webcomponent-like渲染,从组件思维实现微前端,旨在降低上手难度,提高工作效率
https://micro-zoe.github.io/micro-app/ - Tauri
使用 Web 前端构建更小、更快、更安全的桌面应用程序
https://tauri.studio/ - Hippy
跨平台的开发框架,旨在帮助开发者编写一次,运行在三个平台(iOS、Android 和 Web)上
https://hippyjs.org/#/ - 无界
基于 Web Components + iframe 微前端框架,具备成本低、速度快、原生隔离、功能强等一系列优点。
https://wujie-micro.github.io/doc/ - qiankun
微前端的实现,基于single-spa。它旨在使构建生产就绪的微前端架构系统变得更加容易和轻松。
https://qiankun.umijs.org/zh
Flutter
- pub.dev
Dart和Flutter应用程序的官方包存储库
https://pub.dev/ - awesome-flutter-plugins
尽可能收集好用的Flutter插件以便更效率的开发
https://github.com/jahnli/awesome-flutter-plugins - flutter-widget.live
使用 Flutter for web 构建的网站,用于在线实时预览小部件示例。
https://flutter-widget.live/basics/introduction - google Icons
Google Material Design 图标
https://fonts.google.com/icons - Json To Dart Model
Json 转 Dart Model类
https://ashamp.github.io/jsonToDartModel/ - flutter awesome
很棒的列表,其中包含优秀的 Flutter 库和工具
https://flutterawesome.com/ - LottieFiles
免费 Lottie 动画文件、工具和插件
https://lottiefiles.com/
Electron
- vue-cli-plugin-electron-builde
使用Electron轻松构建用于桌面的Vue.js应用
https://nklayman.github.io/vue-cli-plugin-electron-builder/ - electron-about-window
为Electron 提供 “关于此应用程序” 窗口。
https://github.com/rhysd/electron-about-window - nativefier
使任何网页成为桌面应用程序
https://github.com/nativefier/nativefier
Uniapp
- Grace UI
兼容微信小程序及uni-app的优秀前端框架,以flex布局为基础,提供了丰富的组件及界面库GraceUI
https://www.graceui.com/ - uView
全面兼容nvue的uni-app生态框架,全面的组件和便捷的工具
https://www.uviewui.com/ - ThorUI
轻量、简洁、全面的移动端组件库
https://thorui.cn/doc/
CSS
动画
- cssfx
精美简单的点击复制 CSS 效果
https://cssfx.netlify.app/ - Twitter Hashflags
Twitter 点赞动画
https://hashflags.io/ - UI Snippets
UI 片段的集合
https://ui-snippets.dev/ - SpinKit
CSS 动画的加载指示器
https://tobiasahlin.com/spinkit/ - animate.css
强大的预设css3动画库
https://animate.style/ - 犸良
一站式动效制作平台,通过海量的动效素材以及可视化编辑能力,帮助零基础的用户轻松完成动效制作
https://design.alipay.com/emotion - animista
Css 动画
https://animista.net/ - lordicon
功能强大的精心制作的动画图标库
https://lordicon.com/ - svg-spinners
24 x 24 dp的svg格式loading加载器
https://github.com/n3r4zzurr0/svg-spinners - magic
具有炫酷效果的 CSS3 动画
https://www.minimamente.com/project/magic/ - Hover.css
CSS3 驱动的悬停效果,可应用于链接、按钮、徽标、SVG、特色图像等
http://ianlunn.github.io/Hover/ - eva-icons
超过 480 个制作精美的开源图标。SVG、Sketch、Web 字体和动画支持
https://akveo.github.io/eva-icons/#/
工具
- normalize.css
CSS 重置的现代替代方案
http://necolas.github.io/normalize.css/ - Squoosh
对比 tinypng 有【更好的】压缩效果
https://squoosh.app/
UI
- Manypixels
收集无版权插图的网站,提供 SVG / PNG 格式下载,并且允许更改颜色
https://www.manypixels.co/gallery - U钙网
免费的LOGO在线设计制作工具
https://www.uugai.com/ - design-blocks
一组 170 多个基于 Bootstrap 的设计块,可用于创建干净的现代网站
https://froala.com/design-blocks/ - unDraw
精美的 SVG 插画集
https://undraw.co/illustrations - Ira Design
通过调配渐变色、搭配手绘组件定制插画
https://iradesign.io/gallery/illustrations - lukasz adam
免费 SVG 插画
https://lukaszadam.com/illustrations - pixeltrue
创建令人叹为观止的项目的插图
https://www.pixeltrue.com/packs - 3dicons
3d图标库
https://3dicons.co/ - css-buttons
100 个现代 CSS 按钮
https://css-buttons.web.app/ - uiset
优质免费的UI设计资源
https://uiset.com/ - error404
404插画页面
https://error404.fun/ - ui8
5,745 个精选设计资源,为您的创意工作流程注入活力
https://ui8.net/
编程工具
代码工具
- gitignore.io
为项目创建有用的 .gitignore 文件
https://www.toptal.com/developers/gitignore - any-rule
常用正则大全, 支持web / vscode / idea / Alfred Workflow多平台
https://any86.github.io/any-rule/ - 30-seconds-of-code
满足多种语言开发需求的简短代码片段
https://www.30secondsofcode.org/ - github-readme-stats
为 github 自述文件动态生成的统计信息
https://github.com/anuraghazra/github-readme-stats - cz-cli
规范提交说明的git工具
http://commitizen.github.io/cz-cli/ - commitlint
git commit 校验工具
https://commitlint.js.org/#/ - husky
Git hooks 工具,可以防止使用 Git hooks 的一些不好的 commit 或者 push
https://typicode.github.io/husky/#/ - lint-staged
代码提交之前,进行代码规则检查并尝试修复,能够确保进入git库的代码都是符合代码规则
https://github.com/okonet/lint-staged - anywhere
随启随用的静态文件服务器
https://github.com/JacksonTian/anywhere - code996
统计 Git 项目的 commit 时间分布,进而推导出这个项目的编码工作强度
https://hellodigua.github.io/code996/#/
图像工具
- bigjpg
使用度卷积神经网络。它会将噪点和锯齿的部分进行补充,实现图片的无损放大
https://bigjpg.com/ - jpghd
使用人工智能 AI 超分模型和深度学习技术来将低清破损有噪点图片处理成高画质高分辨率图片同时支持破损老照片修复和老照片上色
https://jpghd.com/ - bigmp4
使用智能 AI 模型,能将视频无损高清放大、增强画质、智能补帧使画面丝滑流畅栩栩如生同时支持黑白视频上色和慢动作
https://bigmp4.com/ - imglarger
基于强大的机器学习可在不降低质量的情况下提高图像分辨率
https://imglarger.com/ - unscreen
智能AI去除视频背景在线神器
https://www.unscreen.com/ - 阿里妈妈创意中心
阿里智能文案,智能抠图工具
https://chuangyi.taobao.com/
文件转换
- ALL TO ALL
全类型的在线文件转换平台,免费、快速,无须下载安装任何软件
https://www.alltoall.net/ - Convertio
将文件转换成任意格式
https://convertio.co/zh/
Vue3生态工具
1.Web UI库
- ElementUI Plus
一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的桌面端组件库
https://element-plus.org/zh-CN/ - Ant Design of Vue
Ant Design 的 Vue 实现,开发和服务于企业级后台产品
https://www.antdv.com/docs/vue/introduce-cn - BalmUI
基于谷歌的 Material Design,附带 Vue 插件和指令,以及从简单到复杂的高度可定制组件
https://next-material.balmjs.com/ - Naive UI
图森Vue3的组件库,文档完整,我项目中经常使用
https://www.naiveui.com/zh-CN/os-theme - arco.design
字节跳动企业级产品设计系统,支持React和Vue双版本
https://arco.design/ - Quasar
轻松构建高性能和高质量的Vue.js 3用户界面,好用,但没有中文文档
https://quasar.dev/ - iDUX
Vue3.x 的 UI 组件库,完全使用 TypeScript 开发
https://idux.site/ - TDesign
腾讯业务团队在服务业务过程中沉淀的一套企业级设计体系
https://tdesign.tencent.com/
https://tdesign.tencent.com/vue-next/overview - PrimeVue
易于使用、多功能、高性能的 Vue UI 组件库
https://www.primefaces.org/primevue/ - DevUI
华为基于 Vue3 和 DevUI 设计的 UI 组件
https://vue-devui.github.io/ - vuestic-ui
Vue 3 的免费和开源 UI 库 ,UI非常好看,并且有可用后台管理界面。
https://vuestic.dev/ - Headless UI
完全无样式、完全可访问的 UI 组件,旨在与 Tailwind CSS 完美集成。
https://headlessui.com/ - View UI Plus
基于 Vue.js 3 的企业级 UI 组件库和前端解决方案
https://www.iviewui.com/
2.移动UI库
- Vant
有赞轻量、可靠的移动端组件库
https://vant-contrib.gitee.io/vant/#/zh-CN - NutUI
京东风格的轻量级移动端 Vue 组件库,非常适合移动端电商使用。
https://nutui.jd.com/#/ - Varlet
Material 风格移动端组件库 ,文档非常齐全。
https://varlet.gitee.io/varlet-ui/#/zh-CN/home - nutui-bingo
京东基于 NutUI 的抽奖组件库,助力营销活动和小游戏场景。
https://nutui.jd.com/bingo/#/
3.相关工具
- unplugin-vue-components
antfu 按需组件自动导入,开箱即用地支持 Vue 2 和 Vue 3,Tree-shakable,只注册你使用的组件,附有流行UI 库的内置解析器。
https://www.npmjs.com/package/unplugin-vue-components - vuex-persistedstate
在页面重新加载之间保持并重载您的 Vuex 状态
https://github.com/robinvdvleuten/vuex-persistedstate - vuex-persist
支持 Typescript 的Vuex插件,它能够将应用程序的状态保存到持久存储中,例如 Cookies 或 localStorage
https://championswimmer.in/vuex-persist/ - @vueuse/gesture
手势库,使应用程序具有交互性
https://gesture.vueuse.org/ - unplugin-auto-import
antfu 自动导入 Vite、Webpack、Rollup 和 esbuild 的 API。支持 TypeScript。
https://github.com/antfu/unplugin-auto-import - pinia-plugin-persistedstate
Pinia 商店的可配置持久性
https://github.com/prazdevs/pinia-plugin-persistedstate - https://vue-termui.dev/
一个基于 Vue.js 的终端 UI 框架,可让您轻松构建现代终端应用程序
https://vue-termui.dev/
4.可视化
- Pdfvuer
DF 查看器,使用 Mozilla 的 PDF.js,支持 Vue2 和 Vue3
https://arkokoley.github.io/pdfvuer/ - vue3-marquee
无缝滚动组件
https://vue3-marquee.vercel.app/ - Vue-ECharts
百度ECharts 的 Vue.js 组件。 配置参考Echarts官方 基于 ECharts v5+ 开发,适用于Vue.js 2/3。
https://vue-echarts.dev/ - iconpark
字节跳动出品,将一个SVG图标转化为多个主题,并生成React图标,Vue图标,svg图标
https://iconpark.oceanengine.com/home
5.插件
- vue-multiselect-next
Vue.js 的通用选择/多选/标记组件
https://vue-multiselect.js.org/ - vue-print-nb
用于印刷、简单、快速、方便、轻便的指令包装器
https://github.com/Power-kxLee/vue-print-nb - vue-i18n-next
Vue3的国际化插件
https://vue-i18n.intlify.dev/ - vue-cropper
简单的vue图片裁剪插件
http://github.xyxiao.cn/vue-cropper/example/ - Grid Layout
Vue.js 的网格布局系统
https://jbaysolutions.github.io/ - Vue Qrcode Reader
允许在不离开浏览器的情况下检测和解码二维码
https://gruhn.github.io/vue-qrcode-reader/ - Makeit Captcha
基于 Vue3 + Vite + Canvas 开发的滑块验证码,动态生成验证滑块,结合后端的二次校验,能有效的避免被抓取模拟验证https://admin.makeit.vip/components/captcha - vue3-clipboard
Vue 3 的 clipboard.js
https://github.com/soerenmartius/vue3-clipboard - vue.draggable
基于Sortable.js的Vue 3拖放组件
https://sortablejs.github.io/vue.draggable.next/#/simple - BetterScroll
解决移动端(已支持 PC)各种滚动场景需求的插件。
https://better-scroll.github.io/docs/zh-CN/
6.相关生态
- Vue 插件库
https://www.vue365.cn/ - Pinia
轻量级状态管理库,API 设计更接近Vuex 5的提案
https://pinia.vuejs.org/ - Nuxt Modules
Nuxt 发现我们的模块列表以增强您的Nuxt 项目
https://modules.nuxtjs.org/ - Nuxt 3
轻量级应用框架,可用来创建服务端渲染 (SSR) 应用
https://v3.nuxtjs.org/ - vuepress
Vue 驱动的静态网站生成器
https://v2.vuepress.vuejs.org/zh/ - VueUse
强大的 Vue 组合实用程序集合
https://vueuse.org/
7.动画
- vue-starport
带有动画的跨路由共享组件
https://vue-starport.netlify.app/ - @vueuse/motion
Vue Composables 让你的组件动起来
https://motion.vueuse.org/
8.音视频
- @vueuse/sound
用于播放音效的 Vue 组合
https://sound.vueuse.org/
全栈-后端
插件
- isomorphic-git
用于节点和浏览器的 git 纯 JavaScript 实现
https://isomorphic-git.org/ - jsonwebtoken
node.js 的 JsonWebToken 实现
https://github.com/auth0/node-jsonwebtoken - Qiniu SDK
七牛资源(云)存储 SDK for Node.js
https://developer.qiniu.com/kodo/sdk/nodejs - koa-body
功能齐全的koa正文解析器中间件,支持multipart、urlencoded和json请求正文,提供与 Express 的 bodyParser 相同的功能
https://github.com/koajs/koa-body - koa-json-error
纯Koa JSON 应用程序的错误处理程序,显示堆栈跟踪
https://github.com/koajs/json-error - koa-jwt
用于验证 JSON Web 令牌的 Koa 中间件
https://github.com/koajs/jwt - koa-router
Koa 的路由器中间件
https://github.com/koajs/router - koa2-cors
koa2 的 CORS 中间件
https://github.com/zadzbw/koa2-cors - koa-sslify
为 Koa.js 实施 HTTPS 中间件
https://github.com/turboMaCk/koa-sslify - superagent-proxy
允许您通过某种代理来代理 HTTP 请求
https://github.com/TooTallNate/superagent-proxy - node-http-proxy-agen
HTTP 端点的 HTTP(s) 代理“http.Agent”实现
https://github.com/TooTallNate/node-http-proxy-agent - https-proxy-agent
HTTPS 端点的 HTTP(s) 代理“http.Agent”实现
https://github.com/TooTallNate/node-https-proxy-agent - socks-proxy-agent
用于 HTTP 和 HTTPS 的 SOCKS (v4/v5) 代理“http.Agent”实现
https://github.com/TooTallNate/node-socks-proxy-agent - simple-get
发出 http get 请求的最简单方法。支持 HTTPS、重定向、gzip/deflate、小于 100 行的流
https://github.com/feross/simple-get - commander.js
node.js命令行界面的完整解决方案
https://github.com/tj/commander.js - ora
命令行 loading 动效
https://github.com/sindresorhus/ora - dotenv
从 .env 为 nodejs 项目加载环境变量
https://github.com/motdotla/dotenv - FFCreator
基于node.js的高速视频制作库
https://tnfe.github.io/FFCreator/#/ - sharp
高性能 Node.js 图像处理,调整 JPEG、PNG、WebP、AVIF 和 TIFF 图像大小的最快模块
https://sharp.pixelplumbing.com/ - node-fs-extra
强大的文件操作库, 是 Nodejs fs 模块 的增强版
https://github.com/jprichardson/node-fs-extra - chokidar
用于文件监控的库,解决兼容性不好、无法监听、监听多次 等大量影响性能的问题
https://paulmillr.com/ - fast-glob
快速批量导入、读取文件的库
https://github.com/mrmlnc/fast-glob - peerflix
node.js 的流式 torrent 客户端
https://github.com/mafintosh/peerflix
工具
- Nginx
高性能的HTTP和反向代理web服务器,同时也提供了IMAP/POP3/SMTP服务
https://blog.redis.com.cn/doc/ - PM2
Node进程管理工具,如性能监控、自动重启、负载均衡等
https://pm2.keymetrics.io/docs/usage/process-management/ - nodemon
监视 node.js 应用程序中的任何更改并自动重新启动服务器
https://nodemon.io/ - RobotJS
Node.js 桌面自动化,控制鼠标、键盘和阅读屏幕等
http://robotjs.io/ - Jenkins
领先的开源自动化服务器,Jenkins 提供了数百个插件来支持构建、部署和自动化任何项目
https://www.jenkins.io/ - nexe
将 node.js 应用程序中创建一个可执行文件
https://github.com/nexe/nexe - debug
模仿 Node.js 核心调试技术的小型 JavaScript 调试实用程序。适用于 Node.js 和 Web 浏览器
https://github.com/debug-js/debug
数据库
- mongoose
旨在在异步环境中工作的 MongoDB 对象建模
https://mongoosejs.com/ - GraphQL
用于 API 的查询语言也是一个满足你数据查询的运行时
https://graphql.cn/ - lowdb数据库
适用于Node,Electron和浏览器的小型JSON数据库。由Lodash驱动
https://github.com/typicode/lowdb - nedb
适用于Node.js,nw.js,Electron和浏览器的嵌入式持久性数据库或内存数据库,API是MongoDB的子集
https://github.com/louischatriot/nedb
API
- 网易云音乐 API
全部接口已升级到最新,具备登录接口,多达200多个接口
https://binaryify.github.io/NeteaseCloudMusicApi/#/ - Node-SpliderApi
基于 Node+Express 网络爬虫 API 接口 包括前端开发日报、kugou 音乐、前端 top 框架排行、妹纸福利、搞笑视频、段子笑话、各类视频新闻资讯 热点详情接口数据,接口数据更新目标
https://ecitlm.github.io/Node-SpliderApi/ - 聚合数据
免费向开发者提供全国车辆违章查询API,天气API,基站数据,移动联通基站,电信基站,覆盖国内外1000多个主要城市公共交通信息数据
https://www.juhe.cn/ - 极速数据
提供各类生活数据API,方便开发者快速简单的开发APP、软件及其他服务平台
https://www.jisuapi.com/ - 京东万象
供金融、电商、运营商数据,免费数据,热门数据,学籍数据,企业诉讼数据,实名认证,征信数据,质检等多种数据
https://wx.jdcloud.com/api - QQ音乐API
通过Web网页版请求QQ音乐接口数据
https://rain120.github.io/qq-music-api/#/ - 万维易源
一站式全网API调用平台
https://www.showapi.com/ - TP5 Splider Api
基于Thinkphp5+phpQuery 网络爬虫抓取数据接口 统一输出接口数据api
https://ecitlm.github.io/TP5_Splider/#/ - Roll API
提供开发中常用数据的一个稳定聚合Api接口
https://www.mxnzp.com/doc/list - Open API
收集可用的Open APIs
https://www.wanandroid.com/openapis - 天行数据
160多个免费接口,接口高度统一,简单易用,毫秒级响应
https://www.tianapi.com/ - free-api
免费API,收集免费的接口服务
https://www.free-api.com/ - douban-imdb-api
基于豆瓣、IMDB、烂番茄评分的电影电视剧双语(中英)数据api接口
https://www.iqi360.com/p/douban-imdb-api
框架
- Koa
基于 Node.js 平台的下一代 web 开发框架
https://koajs.com/ - Express
用于Node.js 的快速、独立、简约的 Web 框架
https://expressjs.com/ - egg.js
为企业级框架和应用而生
https://www.eggjs.org/ - Nest.js
构建高效且可扩展的服务器端应用程序的渐进式Node.js框架
https://nestjs.com/
评论