前端工具宝库，帮你解决99%的业务需求难题！！！赶紧收藏起来

zayyo
571 阅读23分钟

Javascript

工具

可视化

  • highlight.js JavaScript 语法高亮器，具有语言自动检测和零依赖项 highlightjs.org/
  • Drawflow 创建简单的流程库 jerosoler.github.io/Drawflow/
  • tui.image-editor HTML5 Canvas 的全功能图像编辑器。它易于使用并提供强大的过滤器 ui.toast.com/tui-image-e…
  • viewerjs JavaScript 图像查看器 fengyuanchen.github.io/viewerjs/
  • prism.js 轻量级、健壮、优雅的语法高亮库 prismjs.com/
  • fabric.js 功能强大且简单的 Canvas库，轻松处理 HTML5 画布元素。是画布元素之上的交互式对象模型，也是一个SVG-to-canvas 解析器 fabricjs.com/
  • fullPage.js 用于创建全屏滚动网站（也称为单页网站或一页网站），并在该网站的各个部分内添加横向滑块 alvarotrigo.com/fullPage/
  • opentype.js OpenType 和 TrueType 字体解析器和编写器。它允许您从浏览器或 node.js访问文本的字母形式 opentype.js.org/
  • icones.js 具有即时搜索功能的图标资源管理器，由 Iconify 提供支持 icones.js.org/
  • reveal.js 创建功能齐全且精美的演示文稿 revealjs.com/
  • carbon 创建和共享源代码的精美图像 carbon.now.sh/
  • lucky-canvas 基于 TS + Canvas 开发的【大转盘 / 九宫格 / 老虎机】抽奖插件， 一套源码适配多端框架 JS / Vue / React / Taro / UniApp / 微信小程序等 100px.net/
  • Darkmode.js 在几秒钟内为您的网站添加暗模式/夜间模式 darkmodejs.learn.uno/?_360safepa…
  • ECharts 强大的交互式图表和浏览器数据可视化库 echarts.apache.org/zh/index.ht…
  • PixiJS 使用最快，最灵活的2D WebGL渲染器创建精美的内容 pixijs.com/
  • AntV - G2 数据驱动，高度易用，可扩展的可视化图形语法。 g2plot.antv.vision/zh/
  • ApexCharts.js 基于SVG的JavaScript图表库，可使用简单的API构建交互式图表和可视化文件
  • OpenLayers 高性能，功能丰富的库，用于在Web上创建交互式地图。它可以显示从任何网页上的任何来源加载的地图图块，矢量数据和标记 openlayers.org/
  • Two.js 面向现代Web浏览器的二维绘图api，渲染不可知实现相同的API在多种环境中得出：svg，canvas，和webgl two.js.org/
  • Paper.js 基于HTML5 Canvas的矢量图形的图形库 paperjs.org/
  • Panolens.js 事件驱动的基于WebGL的全景查看器。轻巧而灵活。它建立在Three.JS之上 pchen66.github.io/Panolens/
  • A-Frame 用于构建 3D/AR/VR 体验的 Web 框架 aframe.io/
  • mermaid-js 以与 Markdown 类似的方式从文本生成图表和流程图 mermaid-js.github.io/mermaid/
  • mo · js 为网站添加基于JavaScript的动态图形 mojs.github.io/
  • trianglify Javascript 库，用于创建独特的、美观的三角形图案 qrohlf.com/trianglify/
  • Babylon.js 能强大、美观、简单、开放的游戏和渲染引擎 www.babylonjs.com/
  • Oasis Engine 高性能 Web 蚂蚁图形引擎 oasisengine.cn/
  • Butterfly 基于JS的数据驱动的节点式编排组件库 butterfly-dag.gitee.io/butterfly-d…
  • image-optimizer 使用 Electron、Vue 和 Vite 用于优化图像和矢量图形的免费开源工具 github.com/antonreshet…
  • Sketchfab 需任何插件即可在Web页面里嵌入交互式3D模型 sketchfab.com/
  • vConsole 用于移动网页的轻量级、可扩展的前端开发工具 github.com/Tencent/vCo…
  • swiper 免费且最现代的移动触摸滑块，具有硬件加速过渡和惊人的原生行为 swiperjs.com/
  • Slidev 面向开发人员的演示幻灯片 sli.dev/
  • konva HTML5 Canvas JavaScript 框架，它支持桌面和移动应用程序的高性能动画、过渡、节点嵌套、分层、过滤、缓存、事件处理等等 konvajs.org/
  • p5.j​​s 开源的JavaScript可视化库，processing的js实现版本 p5js.org/zh-Hans/
  • cesium 用于世界级 3D 地球仪和地图的开源 JavaScript 库 cesium.com/platform/ce…
  • driver.js 一个轻量级、无依赖的用户引导组件 kamranahmed.info/driver.js/
  • vanilla-tilt.js 平滑的 3D 倾斜 JavaScript 库 micku7zu.github.io/vanilla-til…
  • parallax.js 对智能设备的方向引擎响应的视差 matthew.wagerfield.com/parallax/
  • signature_pad 基于 HTML5 canvas 的平滑签名绘制 szimek.github.io/signature_p…
  • compressorjs JavaScript 图像压缩器 fengyuanchen.github.io/compressorj…
  • eva.js 用于创建交互式游戏项目的前端游戏引擎 eva.js.org/
  • d3 基于数据来操作文档的JavaScript库 d3js.org/

动画插件

  • countUp.js 无依赖项的轻量级Javascript类，可用于快速创建以更有趣的方式显示数字数据的动画 inorganik.github.io/countUp.js/
  • impress.js CSS3 转换和过渡的强大功能的演示框架 impress.js.org/
  • Anime.js 轻量级的 JavaScript 动画库，具有简单而强大的 API animejs.com/
  • tween.js 用于简单动画的 JavaScript 补间引擎，包含优化的 Robert Penner 方程 tweenjs.github.io/tween.js/
  • Popmotion 制作数字、颜色和复杂字符串的动画。该库的主要动画功能只有5kb左右，整个库的容量在12kb左右 popmotion.io/
  • Typed.js 打字动画库 mattboldt.com/demos/typed…
  • vivus.js 在 SVG 上制作绘图动画的 JavaScript 库 maxwellito.github.io/vivus/
  • ScrollReveal 在元素滚入或滚出视口时为其制作动画 scrollrevealjs.org/
  • canvas-confetti 按需 五彩纸屑 catdad.github.io/canvas-conf…
  • GSAP 强大的 JavaScript 工具集，构建适用于所有主流浏览器的高性能动画。动画 CSS、SVG、画布、React、Vue、WebGL、颜色、字符串、运动路径、通用对象 greensock.com/
  • lax.js 轻量级（<4kb gzipped）香草 JavaScript 库，可在您滚动时创建流畅美观的动画 github.com/alexfoxy/la…
  • animxyz AnimXYZ 可帮助您为您的网站创建、自定义和组合动画 animxyz.com/
  • svg.js 用于操作和动画 SVG 的轻量级库 svgjs.dev/docs/3.0/
  • zdog 用于画布和 SVG 的扁平、圆形、设计师友好的伪 3D 引擎 zzz.dog/
  • dynamics.js 用于创建基于物理的动画的 JavaScript 库 dynamicsjs.com/
  • Proton Javascript粒子动画库 drawcall.github.io/Proton/

文件操作

音视频

智能化

  • tensorflow.js 用于在浏览器和 Node.js 训练和部署机器学习模型 tensorflow.google.cn/
  • face-api.js 用于在浏览器和 nodejs 中使用 tensorflow.js 进行人脸检测和人脸识别的 JavaScript API github.com/justadudewh…
  • tracking.js 将不同的计算机视觉算法和技术引入浏览器环境。通过使用现代HTML5规范，我们使您能够进行实时颜色跟踪，人脸检测等 trackingjs.com/
  • pose-animator 识别出人类的表情变化和肢体动作，并将其映射到2D矢量图型上 github.com/yemount/pos…
  • ar-cutpaste 手机上预装工具，对着目标物体拍摄，即可将图像复制粘贴进 Photoshop github.com/cyrildiagne…
  • imgcook 专注以 Sketch、PSD、静态图片等形式的视觉稿作为输入，通过智能化技术一键生成可维护的前端代码 www.imgcook.com/
  • nsfwjs 帮助快速识别不合时宜的图像 nsfwjs.com/

编辑器

  • Vditor Markdown 编辑器，支持所见即所得、即时渲染（类似 Typora）和分屏预览模式，由 TypeScript 实现，支持原生 JavaScript、Vue、React、Angular，提供桌面版 b3log.org/vditor/
  • monaco-editor 为VS Code提供支持的代码编辑器 microsoft.github.io/monaco-edit…
  • bytemd 用 Svelte 构建的 Markdown 编辑器组件。它也可以用于其他库/框架，例如 React、Vue 和 Angular bytemd.netlify.app/
  • wangEditor Typescript 开发的 Web 富文本编辑器， 轻量、简洁、易用、开源免费 www.wangeditor.com/
  • mavonEditor Markdown 编辑器，支持多种个性化功能 www.mavoneditor.com/
  • quill API 驱动的富文本编辑器 quilljs.com/
  • codemirror5 浏览器内代码编辑器 codemirror.net/
  • marked 用于解析 Markdown 的编译器 marked.js.org/
  • tiptap 完全控制文本编辑器体验。它是可定制的，带有大量扩展，是开源的，并且有大量的文档 tiptap.dev/

2D 3D

其他常用

  • Auto.js Pro Android上支持Node.js的JavaScript自动化和编程软件 pro.autojs.org/
  • Inquirer.js 实现命令行交互式界面的工具集合 github.com/SBoudrias/I…
  • chalk 命令行美化工具 github.com/chalk/chalk
  • Timer.js 简单而轻量级的库，无需任何依赖项来创建和管理计时器 github.com/husa/timer.…
  • day.js 极简的 JavaScript 库，它使用与 Moment.js 兼容的 API 为现代浏览器解析、验证、操作和显示日期和时间 day.js.org/
  • Socket.io 支持基于事件的实时双向通信 socket.io/
  • The Algorithms GitHub 最大的开源算法库 the-algorithms.com/
  • log-symbols 各种日志级别的彩色符号 github.com/sindresorhu…
  • plop 微型生成器框架，使整个团队可以轻松地创建具有一定一致性的文件 plopjs.com/
  • prompts 轻量级、美观且用户友好的交互式提示 github.com/terkelg/pro…
  • shelljs 基于 Node.js API 的 Unix shell 命令的可移植（Windows/Linux/macOS）实现 www.npmjs.com/package/she…
  • figlet 浏览器控制台个性化输出 github.com/patorjk/fig…
  • picocolors 终端修改输出字符样式的 npm 包，比 chalk 体积小 14 倍，速度快 2 倍 github.com/alexeyraspo…
  • cac 用于构建 CLI 应用程序的 JavaScript 库，体积数倍小于 commander 和 yargs github.com/cacjs/cac
  • npm-run-all 用于并行或顺序运行多个 npm 脚本的 CLI 工具 github.com/mysticatea/…
  • node-semver 语义化版本号管理的 npm 库，比如 判断一个版本是否合法，判断版本号命名是否正确，两个版本谁大谁小之类 等 github.com/npm/node-se…
  • puppeteer 在浏览器中手动执行的大多数操作都可以使用 Puppeteer 完成 生成页面的屏幕截图和 PDF。 抓取 SPA（单页应用程序）并生成预渲染内容 自动化表单提交、UI 测试、键盘输入等。 pptr.dev/
  • temir 用vue组件来编写命令行界面应用的工具 github.com/webfansplz/…
  • enquirer 适用于 Node.js 的时尚、直观且用户友好的提示 github.com/enquirer/en…

跨平台

框架

  • uni-app 使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序等13个平台 uniapp.dcloud.io/
  • react-native 使用 React 构建移动应用程序 reactnative.dev/
  • Flutter Google 的开源框架，用于构建美观、本机编译的多平台应用程序 flutter.dev/
  • chameleon 一套代码运行多端，一端所见即多端所见 cml.didi.cn/
  • Taro 遵循 React 语法规范的多端统一开发框架 taro.zone/
  • Electron 使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序 www.electronjs.org/
  • MicroApp 京东零售推出的微前端框架。基于webcomponent-like渲染，从组件思维实现微前端，旨在降低上手难度，提高工作效率 micro-zoe.github.io/micro-app/
  • Tauri 使用 Web 前端构建更小、更快、更安全的桌面应用程序 tauri.studio/
  • Hippy 跨平台的开发框架，旨在帮助开发者编写一次，运行在三个平台（iOS、Android 和 Web）上 hippyjs.org/#/
  • 无界 基于 Web Components + iframe 微前端框架，具备成本低、速度快、原生隔离、功能强等一系列优点。 wujie-micro.github.io/doc/
  • qiankun 微前端的实现，基于single-spa。它旨在使构建生产就绪的微前端架构系统变得更加容易和轻松。 qiankun.umijs.org/zh

Flutter

Electron

Uniapp

  • Grace UI 兼容微信小程序及uni-app的优秀前端框架，以flex布局为基础，提供了丰富的组件及界面库GraceUI www.graceui.com/
  • uView 全面兼容nvue的uni-app生态框架，全面的组件和便捷的工具 www.uviewui.com/
  • ThorUI 轻量、简洁、全面的移动端组件库 thorui.cn/doc/

CSS

动画

工具

UI

编程工具

代码工具

图像工具

  • bigjpg 使用度卷积神经网络。它会将噪点和锯齿的部分进行补充，实现图片的无损放大 bigjpg.com/
  • jpghd 使用人工智能 AI 超分模型和深度学习技术来将低清破损有噪点图片处理成高画质高分辨率图片同时支持破损老照片修复和老照片上色 jpghd.com/
  • bigmp4 使用智能 AI 模型，能将视频无损高清放大、增强画质、智能补帧使画面丝滑流畅栩栩如生同时支持黑白视频上色和慢动作 bigmp4.com/
  • imglarger 基于强大的机器学习可在不降低质量的情况下提高图像分辨率 imglarger.com/
  • unscreen 智能AI去除视频背景在线神器 www.unscreen.com/
  • 阿里妈妈创意中心 阿里智能文案，智能抠图工具 chuangyi.taobao.com/

文件转换

  • ALL TO ALL 全类型的在线文件转换平台，免费、快速，无须下载安装任何软件 www.alltoall.net/
  • Convertio 将文件转换成任意格式 convertio.co/zh/

Vue3生态工具

1.Web UI库

2.移动UI库

3.相关工具

4.可视化

5.插件

6.相关生态

7.动画

8.音视频

全栈-后端

插件

工具

  • Nginx 高性能的HTTP和反向代理web服务器，同时也提供了IMAP/POP3/SMTP服务 blog.redis.com.cn/doc/
  • PM2 Node进程管理工具，如性能监控、自动重启、负载均衡等 pm2.keymetrics.io/docs/usage/…
  • nodemon 监视 node.js 应用程序中的任何更改并自动重新启动服务器 nodemon.io/
  • RobotJS Node.js 桌面自动化，控制鼠标、键盘和阅读屏幕等 robotjs.io/
  • Jenkins 领先的开源自动化服务器，Jenkins 提供了数百个插件来支持构建、部署和自动化任何项目 www.jenkins.io/
  • nexe 将 node.js 应用程序中创建一个可执行文件 github.com/nexe/nexe
  • debug 模仿 Node.js 核心调试技术的小型 JavaScript 调试实用程序。适用于 Node.js 和 Web 浏览器 github.com/debug-js/de…

数据库

  • mongoose 旨在在异步环境中工作的 MongoDB 对象建模 mongoosejs.com/
  • GraphQL 用于 API 的查询语言也是一个满足你数据查询的运行时 graphql.cn/
  • lowdb数据库 适用于Node，Electron和浏览器的小型JSON数据库。由Lodash驱动 github.com/typicode/lo…
  • nedb 适用于Node.js，nw.js，Electron和浏览器的嵌入式持久性数据库或内存数据库,API是MongoDB的子集 github.com/louischatri…

API

  • 网易云音乐 API 全部接口已升级到最新，具备登录接口,多达200多个接口 binaryify.github.io/NeteaseClou…
  • Node-SpliderApi 基于 Node+Express 网络爬虫 API 接口 包括前端开发日报、kugou 音乐、前端 top 框架排行、妹纸福利、搞笑视频、段子笑话、各类视频新闻资讯 热点详情接口数据,接口数据更新目标 ecitlm.github.io/Node-Splide…
  • 聚合数据 免费向开发者提供全国车辆违章查询API,天气API,基站数据,移动联通基站,电信基站,覆盖国内外1000多个主要城市公共交通信息数据 www.juhe.cn/
  • 极速数据 提供各类生活数据API,方便开发者快速简单的开发APP、软件及其他服务平台 www.jisuapi.com/
  • 京东万象 供金融、电商、运营商数据,免费数据,热门数据,学籍数据,企业诉讼数据,实名认证,征信数据,质检等多种数据 wx.jdcloud.com/api
  • QQ音乐API 通过Web网页版请求QQ音乐接口数据 rain120.github.io/qq-music-ap…
  • 万维易源 一站式全网API调用平台 www.showapi.com/
  • TP5 Splider Api 基于Thinkphp5+phpQuery 网络爬虫抓取数据接口 统一输出接口数据api ecitlm.github.io/TP5_Splider…
  • Roll API 提供开发中常用数据的一个稳定聚合Api接口 www.mxnzp.com/doc/list
  • Open API 收集可用的Open APIs www.wanandroid.com/openapis
  • 天行数据 160多个免费接口，接口高度统一，简单易用，毫秒级响应 www.tianapi.com/
  • free-api 免费API,收集免费的接口服务 www.free-api.com/
  • douban-imdb-api 基于豆瓣、IMDB、烂番茄评分的电影电视剧双语(中英)数据api接口 www.iqi360.com/p/douban-im…

框架

  • Koa 基于 Node.js 平台的下一代 web 开发框架 koajs.com/
  • Express 用于Node.js 的快速、独立、简约的 Web 框架 expressjs.com/
  • egg.js 为企业级框架和应用而生 www.eggjs.org/
  • Nest.js 构建高效且可扩展的服务器端应用程序的渐进式Node.js框架 nestjs.com/

写在最后

伙伴们，如果你觉得我写的文章对你有帮助就给zayyo点一个赞👍或者关注➕都是对我最大的支持。当然你也可以加我微信：IsZhangjianhao，邀你进我的前端学习交流群，一起学习前端，成为更优秀的工程师～

avatar
文章
阅读
粉丝