35个好用的前端框架，千万收好备用!

本文最后由荒野孤灯更新于 2023 年 11 月 23 日，已超过 148 天没有更新。如果文章内容或图片资源失效，请留言反馈，将会及时处理，谢谢！

今天分享一些目前比较热门新鲜度靠前的 35 款前端工具，希望对你有所帮助。

一、构建工具

1、 Parcel
地址：parceljs.org/
Parcel是一款极速零配置WEB应用打包工具，快速、几乎零配置是它最大的特点，开箱即用。相比webpack，Parcel对于新手来说未尝不是一个很好的选择。

2、sucrase
地址：sucrase.io
如果你用typscript构建React项目，sucrase将是一个不错的选着，它的编译速度将是Babel的20倍。sucrase——一款ES6+编译器，重点关注非标准语言，例如Typescript，JSX和Flow。

3、Webpack Config Tool
地址：webpack.jakoblind.no
一款可视化的在线工具网站，你只需要选择前端项目运用到技术和相关配置，就能一键帮你生成webpack.config.js，省去你不少的麻烦。

4、PWA Universal Builder
地址：pwa.cafe/
一款脚手架构建工具，方便创建基于Preact，React，Vue和Svelte的项目，开箱及支持Babel，Bublé，Browserlist，TypeScript，PostCSS，ESLint，Prettier和Service Workers！

5、VuePress
地址：vuepress.vuejs.org/
VuePress 由两部分组成：第一部分是一个极简静态网站生成器，它包含由 Vue 驱动的主题系统和插件 API，另一个部分是为书写技术文档而优化的默认主题，它的诞生初衷是为了支持 Vue 及其子项目的文档需求。
每一个由 VuePress 生成的页面都带有预渲染好的 HTML，也因此具有非常好的加载性能和搜索引擎优化（SEO）。同时，一旦页面被加载，Vue 将接管这些静态内容，并将其转换成一个完整的单页应用（SPA），其他的页面则会只在用户浏览到的时候才按需加载。

二、框架和库

6、 PWA Starter Kit
地址：pwa-starter-kit.polymer-project.org/
通过功能丰富的WEB组件快速帮你构建功能齐全的PWA网站项目，几乎零配置，完成了构建、测试和快速部署。

7、PaperCSS
地址：www.getpapercss.com/
一个不太常规的CSS框架，如果你希望你的网站有手绘风格感觉，选择它准没错。

8、Stimulus
地址：stimulusjs.org
Stimulus是一个适度的前端框架，它并不试图接管整个前端的方方面面，不关心如何渲染HTML，相反用来增强HTML的相关行为。如果你的团队规模较小，但又想要和那些使用比较费力的主流方案的较大团队竞争，那么这是一个比较适合的前端框架方案。

9、Reakit
地址：reakit.io/
使用这个框架能让你快速搭建漂亮的React UI 交互站点。

10、Evergreen
地址：evergreen.segment.com/
更为强大的React UI 框架，有一套非常标准的UI设计语言帮你构建企业级的具有国际范设计风格的WEB应用，这个框架类似我们国内的ant.design （网址：ant.design/docs/spec/colors-cn）

三、HTML和CSS工具

11、 keyframes.app
地址：keyframes.app
一款基于时间关键帧，在线制作网页动画的网站，你无需在编辑器和浏览器直接互相切换，及所见即所得。keyframes.app提供在线制作和谷歌浏览器扩展插件两种形式。制作完成后，你能很方便的将自动产生的CSS代码复制到你的项目中。

12、 Emotion
地址：emotion.sh/
Emotion是一款用JavaScript编写css的库，支持字符串和对象两种方式声明CSS变量，如果你在使用React，试用这个库将让你以更加优雅的方式用JavaScript编写CSS。

13、layerJS
地址：layerjs.org/
一款你只需要编写HTML就能很轻松实现菜单、画框、弹出层、滚动视察、缩放、触摸手势等众多效果的框架，这个框架代码压缩版只有30KB,很方便与各种前端框架集成(Angular,VueJS,React),支持响应式和触摸，并且不依赖任何库就能实现。

14、css-blocks
地址：css-blocks.com/
一款受 CSS Modules, BEM 和 Atomic CSS 框架启发，为你的web应用组件提供完美的CSS模块方案。

15、usebasin
地址：usebasin.com/
一款你只需要设计表单，无需编写后端代码，就能很方便的将表单应用集成到你的项目里。

四、javascript工具

16、ScrollHint
地址：appleple.github.io
一个JS库，用于指示元素可以水平滚动，并带有指针图标，如果你在做一个新手引导，这个工具将会是一个不错的选择。

17、Dinero.js
地址：sarahdayan.github.io/dinero.js/
一个用来创建、计算和格式化货币价值的不可变的框架。
无论在银行应用程序、电子商务网站还是证券交易所平台，我们每天都在与金钱互动。我们也越来越依赖技术来处理问题。
然而，关于如何以编程处理货币价值尚无共识。虽然金钱是现代社会中普遍存在的概念，但相较于日期和时间之类的东西，它并不是任何主流语言中的一流数据类型。结果，每一种软件都有自己的处理方式，且伴随着陷阱。
Dinero.js遵循Fowler的模式更多一点儿。它允许你在JavaScript中创建、计算和格式化货币值。你可以进行数学运算、解析和格式化对象，使你的开发过程更加轻松。
该库设计为不可变和可链接的模式。它支持全局设置，具有扩展格式选项，并提供本机国际化支持。

18、Swup
地址：github.com/gmrchk/swup
一款适合初学者的框架，方便灵活易用，让你能快速制作专业级的页面转场动画效果。

19、Selection.js
地址：simonwep.github.io/selection/
简单易用的可视化，支持鼠标拖拽、使用Cmd/Ctrl+click 选择页面元素的库（支持分组选择），大大节省了你的开发时间。只有3KB大小，不依赖jQuery。

20、Glider.js
地址：nickpiscitelli.github.io/Glider.js/
一个超快速(25毫秒加载)，轻量级(小于3KB)，无依赖性(不需要jQuery)的制作幻灯效果的前端库，支持响应式，易于扩展，方便自定义事件等...，更多特性等待你的发现！

21、ScrollOut
地址：scroll-out.github.io/
一款帮你制作专业级Scroll滚动效果（滚动视差）的框架，框架大小不到1KB,使用回调的方式将相关动画元素的属性进行实时分配，方便你做出个性化的动态效果。
自己是从事了五年的前端工程师，不少人私下问我，2019年前端该怎么学，方法有没有？
没错，年初我花了一个多月的时间整理出来的学习资料，希望能帮助那些想学习前端，却又不知道怎么开始学习的朋友。

五、图标、图表工具

22、Orion Icon Library
地址：orioniconlibrary.com/
多达6000专业免费的SVG矢量图标，还支持深度的定制，比如更换配色，更改线条粗细，变换图标风格(细线条、粗线条、扁平)，一键生成相关代码。

23、Frappe Charts
地址：frappe.io/charts
一款简单、专业、开源、现代风格的SVG报表工具,不需要任何依赖库，代码风格简单，简单易用。支持一键导出svg代码。

24、SVGator
地址：www.svgator.com/
如果您希望将Web图形提升到一个新的水平，那么动画SVG就是您的选择，而SVGator是您可以用来创建它们的最简单的工具之一。
一款专业级的SVG动画制在线制作工具。SVGator还具有代码管理器面板，因此您可以准确地看到应用程序生成的代码。SVGator导出干净，格式良好的代码。

25、ApexCharts
地址：apexcharts.com/
ApexCharts.JS 是一个现代化 JavaScript 图表库，用于使用简单的 API 构建交互式图表和可视化，功能十分强大。方便你将图表嵌入到你的Vue、React项目中。

26、MapKit JS
地址：developer.apple.com
一款苹果公司提供的地图工具，如果想制作和苹果官方网站一样的地图风格，这个工具将是一个不错的选择，允许你在地图上添加交互事件，丰富你的地图应用。

27、RSUITE
地址：rsuitejs.com/
React Suite 是一套 React 组件库，为后台产品而生。由 HYPERS 前端团队与 UX 团队打造，主要服务于公司大数据产品线。
经历了三次大的版本更新后，累积了大量的组件和丰富的功能。并支持在线定制个性化主题，更重要的是有中文版，方便我们学习使用。

28、Pagedraw
地址：pagedraw.io/
一款神奇的在线UI设计制作工具，你只需要拖动和布局页面，这个工具就会给你自动生成质量高的React组件代码，更多功能等待你的发掘。

29、Unstated
地址：unstated.io/
一个新的状态管理类库 unstated.js：简单易用/合理。和之前的 state 管理库思路完全不同，这个unstated主打 local state（不是全局store，一个小改动导致整棵树 rerender），多个 local state 之间也可以共享，兼具了redux的易用性与flux的合理性，令人耳目一新；unstated完全就是为React设计的，“足够React”，让你感觉不到在用第三方组件。

30、Reach Router
地址：reach.tech/router
Reach-Router 是前 ReactRouter 成员 Ryan Florence 开发的一套基于 react 的路由控件. 那么已经有比较成熟的 ReactRouter 了, 为什么要”再”做一套 Router 呢, 有兴趣的同学可以去了解一下,小编认为主要有以下几个特点值得你看看：
小，就4kb,压缩后比react-router小40kb左右。
更少的配置
更好用
基本一样的api,学习成本非常低
源码非常简洁，总共就3个文件，900行，如果你想深入理解单页应用的路由是怎么实现的，reach-router,绝对是绝佳的下手资料

31、SVGR
地址：www.smooth-code.com/
svgr是一个将SVG转换为React组件的工具，svgr由JavaScript实现。整个文档也非常的小，已开源在github上。

32、webhint
地址：webhint.io/
Webhint项目提供了一种用于检查代码的可访问性、性能和安全的开源检查（Linting）工具。在创建Web站点和应用中，有越来越多的细节问题亟待完善。为此，Webhint力图帮助开发人员标记这些细节。
Webhint以命令行接口（CLI）工具和在线扫描器两种形式提供，使用在线扫描器是最快的上手方式。使用在线扫描器需要为其提供一个公开的URL，用于运行报告并洞悉应用的运行情况。
在测试应用时，Webhint提供三种运行环境：jsdom、Chrome和Edge。后两种运行环境使用了Chrome DevTools协议，第一种运行环境使用Node.js环境快速地执行有限次数的检查，无需浏览器的支持。
还有更多强大的功能，还有待你试用挖掘。

33、jsonstore.io
地址：www.jsonstore.io/
jsonstore.io为小型项目提供免费，安全且基于JSON的云数据存储。只需输入https://www.jsonstore.io/，复制URL就可以开始发送HTTP数据请求。POST请求将保存数据，PUT请求修改数据，DELETE请求删除数据和GET请求检索数据。大大方便了前端开发人员进行测试接口的集成，前端页面制作完成就能进行接口测试，使用起来就是这么简单。

34、Initab
地址：initab.com/
一款为开发人员定制打造的工作台，通过谷歌浏览器插件安装即可使用，通过此工作台你可以轻松订阅你感兴趣的git项目、跟进相关问题、pull相关操作，查看版本历史，订阅Stack Overflow相关的内容，管理查看Gists相关内容，可以说一个主流技术平台聚合工作台。

35、lambdatest
地址：www.lambdatest.com/
一款在线自动化测试云端平台，号称在2000多个真实浏览器和设备进行测试，可以根据你的测试需求进行深度定制，并形成相关记录，方便团队的协作，帮你发现跨平台不同浏览器版本的各种问题。