搜索
查看
编辑修改
首页
UNITY
NODEJS
PYTHON
AI
GIT
PHP
GO
CEF3
JAVA
HTML
CSS
搜索
黑客灵魂
这个屌丝很懒,什么也没留下!
关注作者
热门标签
jquery
HTML
CSS
PHP
ASP
PYTHON
GO
AI
C
C++
C#
PHOTOSHOP
UNITY
iOS
android
vue
xml
爬虫
SEO
LINUX
WINDOWS
JAVA
MFC
CEF3
CAD
NODEJS
GIT
Pyppeteer
article
热门文章
1
libspice源文件笔记
2
如何利用大模型LLM辅助,使用Python完成将CSV快速导入MySQL数据库_大模型向量csv文件
3
Adaptive Execution如何让Spark SQL更高效更好用
4
vue3+vite+ts 使用webrtc-streamer播放海康rtsp监控视频_vue3+vite+ts 下使用海康摄像头sdk webvideoctrl
5
推荐几个vue3开源二次封装框架【收藏起来以后一定用的到】_vue3开源框架
6
体验亚马逊AIGC——Amazon Bedrock
7
git使用unstash失败,解决方法_git unstash failed
8
建立git仓库的步骤以及命令_公司里面怎么git仓库呢
9
基于OpenCv的人脸识别
10
ElasticSearch的update_by_query使用_es update by query
当前位置:
article
> 正文
50个好用的前端工具,建议收藏!
作者:黑客灵魂 | 2024-07-07 05:49:56
赞
踩
前端好用工具
来源 | https://www.jianshu.com/p/182b69e54fe8
今天跟你分享一些目前比较热门新鲜度靠前的50款前端工具,希望对你有所帮助。
一、构建工具
1、 Parcel
地址:https://parceljs.org/
Parcel是一款极速零配置WEB应用打包工具,快速、几乎零配置是它最大的特点,开箱即用。相比webpack,Parcel对于新手来说未尝不是一个很好的选择。
2、 Critters
地址:github.com
一款webpack的插件,它可以很方便的配置内联关键css( critical CSS ),其余的css部分则会异步加载,由于它不使用无头浏览器(headless browser)呈现内容,因此快速轻巧。
3、sucrase
地址:sucrase.io
如果你用typscript构建React项目,sucrase将是一个不错的选着,它的编译速度将是Babel的20倍。sucrase——一款ES6+编译器,重点关注非标准语言,例如Typescript,JSX和Flow。
4、Webpack Config Tool
地址:webpack.jakoblind.no
一款可视化的在线工具网站,你只需要选择前端项目运用到技术和相关配置,就能一键帮你生成webpack.config.js,省去你不少的麻烦。
5、JSUI
地址:github.com/kitze/JSUI
JSUI 是一个可视化分类、构建和管理 JavaScript 项目的工具。不管是前端应用还是后端应用,也不论使用的是哪种框架,只要项目有一个 package.json ,即可进行管理。
6、PWA Universal Builder
地址:pwa.cafe/
一款脚手架构建工具,方便创建基于Preact,React,Vue和Svelte的项目,开箱及支持Babel,Bublé,Browserlist,TypeScript,PostCSS,ESLint,Prettier和Service Workers!
7、VuePress
地址:vuepress.vuejs.org/
VuePress 由两部分组成:第一部分是一个极简静态网站生成器,它包含由 Vue 驱动的主题系统和插件 API,另一个部分是为书写技术文档而优化的默认主题,它的诞生初衷是为了支持 Vue 及其子项目的文档需求。
每一个由 VuePress 生成的页面都带有预渲染好的 HTML,也因此具有非常好的加载性能和搜索引擎优化(SEO)。同时,一旦页面被加载,Vue 将接管这些静态内容,并将其转换成一个完整的单页应用(SPA),其他的页面则会只在用户浏览到的时候才按需加载。
二、框架和库
8、 PWA Starter Kit
地址:pwa-starter-kit.polymer-project.org/
通过功能丰富的WEB组件快速帮你构建功能齐全的PWA网站项目,几乎零配置,完成了构建、测试和快速部署。
9、PaperCSS
www.getpapercss.com/
一个不太常规的CSS框架,如果你希望你的网站有手绘风格感觉,选择它准没错。
10、boardgame.io
地址:boardgame.io/
BOARDGAME.IO是 Google 开源的一个游戏框架,旨在允许游戏作者将游戏规则从本质上转化为一系列简单的函数,这些函数用于描述当一个指定动作发生时游戏的状态变化,框架负责处理表述性状态传递。无需再手动编写任何网络或后端代码。功能特性:
状态管理:自动跨浏览器、服务器和存储器无缝管理游戏状态;
快速成型:在渲染游戏之前调试界面以模拟更改。
多人游戏:所有连接到同一游戏的浏览器都实时同步,无需刷新。
私密状态:私密信息可从客户端隐藏。
日志:游戏日志可查看任意时间的信息。
UI 工具包:常用于游戏中的 React 组件。
11、Stimulus
地址:stimulusjs.org
Stimulus是一个适度的前端框架,它并不试图接管整个前端的方方面面,不关心如何渲染HTML,相反用来增强HTML的相关行为。如果你的团队规模较小,但又想要和那些使用比较费力的主流方案的较大团队竞争,那么这是一个比较适合的前端框架方案。
12、sapper
地址:sapper.svelte.technology/
Sapper是一个类似Next.js的框架,具有极高的性能和内存效率,具备代码分割,服务端渲染的现代框架功能,是一款军工级别的框架。
13、Reakit
地址:reakit.io/
使用这个框架能让你快速搭建漂亮的React UI 交互站点。
14、Evergreen
地址:evergreen.segment.com/
更为强大的React UI 框架,有一套非常标准的UI设计语言帮你构建企业级的具有国际范设计风格的WEB应用,这个框架类似我们国内的ant.design(https://ant.design/docs/spec/colors-cn)
三、HTML和CSS工具
15、 keyframes.app
地址:keyframes.app
一款基于时间关键帧,在线制作网页动画的网站,你无需在编辑器和浏览器直接互相切换,及所见即所得。keyframes.app提供在线制作和谷歌浏览器扩展插件两种形式。制作完成后,你能很方便的将自动产生的CSS代码复制到你的项目中。
16、 Emotion
地址:emotion.sh/
Emotion是一款用JavaScript编写css的库,支持字符串和对象两种方式声明CSS变量,如果你在使用React,试用这个库将让你以更加优雅的方式用JavaScript编写CSS。
17、modern-normalize
地址:github.com
normalize.css可以让浏览器以接近标准的方式一致地渲染所有元素,而且不同于cssrest,只针对需要正常化的元素。modern-normalize只针对现代浏览器,而且足够现代,甚至IE和Edge都已经放弃。
18、layerJS
地址:layerjs.org/
一款你只需要编写HTML就能很轻松实现菜单、画框、弹出层、滚动视察、缩放、触摸手势等众多效果的框架,这个框架代码压缩版只有30KB,很方便与各种前端框架集成(Angular,VueJS,React),支持响应式和触摸,并且不依赖任何库就能实现。
19、css-blocks
地址:css-blocks.com/
一款受 CSS Modules, BEM 和 Atomic CSS 框架启发,为你的web应用组件提供完美的CSS模块方案。
20、usebasin
地址:usebasin.com/
一款你只需要设计表单,无需编写后端代码,就能很方便的将表单应用集成到你的项目里。
21、mustard
地址:mustard-ui.com/
一款适合初学者的CSS框架,但是看起来还蛮不错,模块化,开源,压缩版只有6KB,支持FLEX,Grid布局和自带一些漂亮UI,比如进度条,表单、按钮等,虽然小,但功能齐全。
四、javascript工具
22、ScrollHint
地址:appleple.github.io
一个JS库,用于指示元素可以水平滚动,并带有指针图标,如果你在做一个新手引导,这个工具将会是一个不错的选择。
23、ToastUI editor
地址:github.com
强大的Markdown编辑器tui.editor,方便集成到你的项目里,这款强大的富媒体编辑器有以下特点:
支持 CommonMark 与 GFM(GitHub Flavored Markdown)两种标准
支持丰富的扩展插件,如颜色选择器、图表、UML、表格合并
提供了所见即所得与 Markdown 这两种模式,在编辑过程中可以随时切换,非常方便。在所见即所得模式下,可以直接从浏览器、 Excel、PPT等复制文本,并且保留原来的格式
24、FilePond
地址:github.com
Filepond 是一个用于文件上传的 JavaScript 库,可以上传任何内容,优化图像以获得更快的上传速度,并提供一个出色的,可访问的,流畅的用户体验。
Filepond 提供了多种上传方式:拖放,复制和粘贴文件,浏览文件系统或仅使用库的API。gzip 压缩后仅有 21KB ,并且内置了图像优化和图像自动调整功能。
Filepond 适用于 React , Vue , Angular 和 jQuery 。
25、Dinero.js
地址:sarahdayan.github.io/dinero.js/
一个用来创建、计算和格式化货币价值的不可变的框架。
无论在银行应用程序、电子商务网站还是证券交易所平台,我们每天都在与金钱互动。我们也越来越依赖技术来处理问题。
然而,关于如何以编程处理货币价值尚无共识。虽然金钱是现代社会中普遍存在的概念,但相较于日期和时间之类的东西,它并不是任何主流语言中的一流数据类型。结果,每一种软件都有自己的处理方式,且伴随着陷阱。
Dinero.js遵循Fowler的模式更多一点儿。它允许你在JavaScript中创建、计算和格式化货币值。你可以进行数学运算、解析和格式化对象,使你的开发过程更加轻松。
该库设计为不可变和可链接的模式。它支持全局设置,具有扩展格式选项,并提供本机国际化支持。
26、Swup
地址:github.com/gmrchk/swup
一款适合初学者的框架,方便灵活易用,让你能快速制作专业级的页面转场动画效果。
27、Selection.js
地址:simonwep.github.io/selection/
简单易用的可视化,支持鼠标拖拽、使用Cmd/Ctrl+click 选择页面元素的库(支持分组选择),大大节省了你的开发时间。只有3KB大小,不依赖jQuery。
28、Glider.js
地址:nickpiscitelli.github.io/Glider.js/
一个超快速(25毫秒加载),轻量级(小于3KB),无依赖性(不需要jQuery)的制作幻灯效果的前端库,支持响应式,易于扩展,方便自定义事件等...,更多特性等待你的发现!
29、ScrollOut
地址:scroll-out.github.io/
一款帮你制作专业级Scroll滚动效果(滚动视差)的框架,框架大小不到1KB,使用回调的方式将相关动画元素的属性进行实时分配,方便你做出个性化的动态效果。
自己是从事了五年的前端工程师,不少人私下问我,2019年前端该怎么学,方法有没有?
没错,年初我花了一个多月的时间整理出来的学习资料,希望能帮助那些想学习前端,却又不知道怎么开始学习的朋友。
五、图标、图表工具
30、Orion Icon Library
地址:orioniconlibrary.com/
多达6000专业免费的SVG矢量图标,还支持深度的定制,比如更换配色,更改线条粗细,变换图标风格(细线条、粗线条、扁平),一键生成相关代码。
31、Frappe Charts
地址:frappe.io/charts
一款简单、专业、开源、现代风格的SVG报表工具,不需要任何依赖库,代码风格简单,简单易用。支持一键导出svg代码。
32、SVGator
地址:www.svgator.com/
如果您希望将Web图形提升到一个新的水平,那么动画SVG就是您的选择,而SVGator是您可以用来创建它们的最简单的工具之一。
一款专业级的SVG动画制在线制作工具。SVGator还具有代码管理器面板,因此您可以准确地看到应用程序生成的代码。SVGator导出干净,格式良好的代码。
33、ApexCharts
地址:apexcharts.com/
ApexCharts.JS 是一个现代化 JavaScript 图表库,用于使用简单的 API 构建交互式图表和可视化,功能十分强大。方便你将图表嵌入到你的Vue、React项目中。
34、MapKit JS
地址:developer.apple.com
一款苹果公司提供的地图工具,如果想制作和苹果官方网站一样的地图风格,这个工具将是一个不错的选择,允许你在地图上添加交互事件,丰富你的地图应用。
35、Img2
地址:github.com
一款图片自动预加载和缓存工具,防止图片闪烁,并使用模糊滤镜预先显示图片延迟图片加载,提高网页加载速度,使用起来非常简单,你只需要使用<img-2>替代<img/>标签即可,使用起来就是这么简单!
36、Lozad
地址:github.com
Lozad.js 是基于 IntersectionObserver API 的轻量级、高性能、可配置的纯 JavaScript并且无依赖的懒加载器,其能够被用于进行图片、iframe 等多种形式的元素。
通过gzip压缩过后,仅仅1kb大小,相对于常用的jquery.lazyload.js来说,lozad.js实力碾压,虽然jquery.lazyload.js也才几kb大小。在github上,已经收获了4800+的star。
React工具
37、RSUITE
地址:rsuitejs.com/
React Suite 是一套 React 组件库,为后台产品而生。由 HYPERS 前端团队与 UX 团队打造,主要服务于公司大数据产品线。
经历了三次大的版本更新后,累积了大量的组件和丰富的功能。并支持在线定制个性化主题,更重要的是有中文版,方便我们学习使用。
38、Pagedraw
地址:pagedraw.io/
一款神奇的在线UI设计制作工具,你只需要拖动和布局页面,这个工具就会给你自动生成质量高的React组件代码,更多功能等待你的发掘。
39、react-smooth-dnd
地址:github.com/kutlugsahin…
一款拖拽页面元素的React工具,拖拽效果平滑,让你轻松就能实现卡片、列表、表单组件的的拖拽。
40、Unstated
地址:unstated.io/
一个新的状态管理类库 unstated.js:简单易用/合理。和之前的 state 管理库思路完全不同,这个unstated主打 local state(不是全局store,一个小改动导致整棵树 rerender),多个 local state 之间也可以共享, 兼具了redux的易用性与flux的合理性,令人耳目一新;unstated完全就是为React设计的,“足够React”,让你感觉不到在用第三方组件。
41、Reach Router
地址:reach.tech/router
Reach-Router 是前 ReactRouter 成员 Ryan Florence 开发的一套基于 react 的路由控件. 那么已经有比较成熟的 ReactRouter 了, 为什么要”再”做一套 Router 呢, 有兴趣的同学可以去了解一下,小编认为主要有以下几个特点值得你看看:
小,就4kb,压缩后比react-router小40kb左右。
更少的配置
更好用
基本一样的api,学习成本非常低
源码非常简洁,总共就3个文件,900行,如果你想深入理解单页应用的路由是怎么实现的,reach-router,绝对是绝佳的下手资料
42、SVGR
地址:www.smooth-code.com/
svgr是一个将SVG转换为React组件的工具,svgr由JavaScript实现。整个文档也非常的小,已开源在github上。
43、React Spreadsheet Grid
地址:github.com/
用于React类似于Excel的网格组件,具有自定义单元格编辑器,高性能滚动和可调整大小的列。
测试和数据工具
44、webhint
地址:webhint.io/
Webhint项目提供了一种用于检查代码的可访问性、性能和安全的开源检查(Linting)工具。在创建Web站点和应用中,有越来越多的细节问题亟待完善。为此,Webhint力图帮助开发人员标记这些细节。
Webhint以命令行接口(CLI)工具和在线扫描器两种形式提供,使用在线扫描器是最快的上手方式。使用在线扫描器需要为其提供一个公开的URL,用于运行报告并洞悉应用的运行情况。
在测试应用时,Webhint提供三种运行环境:jsdom、Chrome和Edge。后两种运行环境使用了Chrome DevTools协议,第一种运行环境使用Node.js环境快速地执行有限次数的检查,无需浏览器的支持。
还有更多强大的功能,还有待你试用挖掘。
45、Airtap
地址:github.com/airtap/airt…
Airtap 是一种在浏览器中测试 JavaScript 的简单方法,号称能覆盖800多种浏览器,能够在数秒内开始在本地测试你的代码,并无缝转移到由 Sauce Labs 提供的基于云的浏览器上,以获得更好的覆盖测试。
Airtap 与其他跨浏览器测试运行器的不同之处在于其简单性,以及能够在许多浏览器中轻松运行测试套件而无需在本地安装它们。它可以让你在开发过程中快速迭代,并在发布前提供良好的浏览器覆盖率,而不用担心缺少浏览器支持。
不要只是声称你的 JavaScript 支持“所有浏览器”,用测试证明它!
46、mkcert
地址:github.com/FiloSottile…
HTTPS 是 Web 发展的趋势,用于提高网站的安全性。使用 HTTPS 需要配置 TLS 证书,得益于 ACME 协议和 Let's Encrypt 证书,远程环境可以很容易部署。但是对于本地环境,还没有普遍有效的证书。
mkcert 被设计的足够简单,隐藏了几乎所有生成 TLS 证书所必须的知识。它适用于任何主机名或者 IP,包括 localhost ,因为它只在你的本地环境使用。
证书是由你的私有 CA 签发,当你运行 mkcert-install 会自动配置这些信任,因此,当浏览器访问时,就会显示安全标识。目前支持 MacOS、Linux 和 Windows,以及 Firefox、Chrome 和 Java。甚至支持一些手机设备。
47、Puppeteer Recorder
地址:checklyhq.com/docs/puppet…
Puppeteer 是一个Node库,它提供了一个高级API来控制DevTools协议上的Chrome或Chromium,常用于爬虫、自动化测试等,你在浏览器手动完成的大多数事情都可以使用它来完成。
48、jsonstore.io
地址:www.jsonstore.io/
jsonstore.io为小型项目提供免费,安全且基于JSON的云数据存储。只需输入https://www.jsonstore.io/,复制URL就可以开始发送HTTP数据请求。POST请求将保存数据,PUT请求修改数据,DELETE请求删除数据和GET请求检索数据。大大方便了前端开发人员进行测试接口的集成,前端页面制作完成就能进行接口测试,使用起来就是这么简单。
49、Initab
地址:initab.com/
一款为开发人员定制打造的工作台,通过谷歌浏览器插件安装即可使用,通过此工作台你可以轻松订阅你感兴趣的git项目、跟进相关问题、pull相关操作,查看版本历史,订阅Stack Overflow相关的内容,管理查看Gists相关内容,可以说一个主流技术平台聚合工作台。
50、lambdatest
地址:www.lambdatest.com/
一款在线自动化测试云端平台,号称在2000多个真实浏览器和设备进行测试,可以根据你的测试需求进行深度定制,并形成相关记录,方便团队的协作,帮你发现跨平台不同浏览器版本的各种问题。
声明:
本文内容由网友自发贡献,转载请注明出处:
【wpsshop博客】
推荐阅读
article
简单的
AES
与
RSA
组合加密
解密
测试
工具
类_
aes
解密
工具
...
简单的
AES
与
RSA
组合加密
解密
测试
工具
类,测试代码可以直接运行,可以参考修改优化_
aes
解密
工具
aes
解密
工具
...
赞
踩
article
kafka
send
方法
小结_
kafka
.
send
...
1、
kafka
的
send
默认发送方式应该是同步,而非异步public ApacheKafkaClient(String...
赞
踩
article
DCMM
数据管理
能力
成熟度
评估模型的
能力
域_
dmbook
能力
域...
DCMM
认证是中国首个
数据管理
国家标准,帮助企业通过评估8个
能力
域(如数据战略、治理、架构等)来提升
数据管理
能力
,分为5...
赞
踩
article
如何
调用
讯
飞
星火
认知大
模型
的
API
以利用其卓越功能_
讯
飞
星火
api
调用
...
讯
飞
星火
认知大
模型
是由科大
讯
飞构建的一款先进的人工智能
模型
。这款
模型
在处理自然语言理解和生成方面具有卓越的能力,能够提供...
赞
踩
article
C#之
AES
加密
解密
_
aes
密钥
在线生成
工具
...
AES
加密
标准又称为高级
加密
标准Rijndael
加密
法,是美国国家标准技术研究所NIST旨在取代DES的21世纪的
加密
标...
赞
踩
article
Qwen
-VL图文多模态大模型
LoRA
微调
指南_
qwen
-vl-
chat
lora
微调
与加载...
Qwen
-VL 是阿里云研发的大规模视觉语言模型(Large Vision Language Model, LVLM)。...
赞
踩
article
C++
11
for
循环
(基于范围
的
循环
)详解...
C++
11
标准之前(
C++
98/03 标准),如果要用
for
循环
语句遍历一个数组或者容器,只能套用如下结构:fo...
赞
踩
article
LeetCode每日一题
--
48. 旋转图像(矩阵)_
class
solution
{
public
...
题目:跳转至 48. 旋转图像给定一个 n × n 的二维矩阵表示一个图像。将图像顺时针旋转 90 度。说明:你必须在原...
赞
踩
article
不可错过
的
效能利器「
GitHub
热点
速览
v.22
.39」...
作者:Hello
GitHub
-小鱼干如果你是一名前端工程师且维护着多个网站,不妨试试本周榜上有名
的
HTML-first...
赞
踩
article
解决py
torch
安装后
impor
t
torch
出现的No
module
named
‘
torch
’...
主要是版本不匹配问题,按图片add,修改为对应3.7版本即可,写下来给自己提个醒_安装了py
torch
但是
impor
t...
赞
踩
article
java
框架
常见
面试题
_
java
框架
面试题
总结...
有心了解
java
相关
面试题
的小伙伴们,想必类似的题目也看得太多了,下面呢就跟小编一起来看看
java
的有关
框架
的
面试题
吧。...
赞
踩
article
Java
进阶
DAY31
-02-
并行
与
并发
_
java
并发
和
并行
...
换句话说,
并发
关注的是多个任务如何交替执行,以给人一种"同时"执行的错觉。
并发
不是真正意义上的"同时"执行,而是任务在不...
赞
踩
article
Java
程序员必须熟记的微
服务
面试题(含答案),
dubbo
面试
问题
_
服务
器
开发
工程师面试
问题
...
引领完成Docker的安装、部署、管理和扩展,让其经历从测试到生产的整个
开发
生命周期,深入了解Docker适用于什么场景...
赞
踩
article
tech
talk
2...
Geir Magnusson: I was very excited to see that the…I am a MA...
赞
踩
article
python
常用
模块
及
面向对象
(一)...
目录:
常用
模块
之time
模块
常用
模块
之random
模块
常用
模块
之os
模块
常用
模块
之sys
模块
常用
模块
之subproces...
赞
踩
article
什么是
低
代码
(
LowCode
)/无
代码
(
NoCode
)
平台
?_
disscode
低
代码
ide...
本文介绍了
低
代码
(
LowCode
)/无
代码
(
NoCode
)
平台
,它们帮助企业通过可视化界面快速搭建应用,降
低
开发门槛。
低
...
赞
踩
article
“
队列
”
无罪
,
只是太美
(
Java
篇
)
...
本文介绍了
Java
中的Queue接口及其Queue类
,
重点讲解了
队列
的基本概念、特点
(
先进先出FIFO
)
,
以及如何在Ja...
赞
踩
article
【
PyTorch
】成功解决
ModuleNotFoundError
: No
module
named
...
module
no
tfounderror:
no
module
named
'
torch
...
赞
踩
article
unity
--
json
读取与
解析
_
unity
解析
json
文件
...
unity
--
json
读取与
解析
。_
unity
解析
json
文件
unity
解析
json
文件
...
赞
踩
article
Java
面试题
微
服务
_
java
微
服务
面试官问题...
在计算中,负载平衡可以改善跨计算机,计算机集群,网络链接,中央处理单元或磁盘驱动器等多种计算资源的工作负载分布。是一个延...
赞
踩
相关标签
开发语言
java
大数据
人工智能
深度学习
python
c#
aes
AES加密
AES解密
AIGC
大模型
LLM
微调
c++11
for循环
c++
leetcode
java框架常见面试题
多线程
并行与并发
微服务
dubbo