4 月最热门的 20 个前端开源项目

出处：前端GitHub（ID：FrontEndGitHub）

作者：猫哥

GitHub 上面有个 Trending 榜 (趋势榜)，在 Trending 页面，你可以看到最近一些热门的开源项目或者开发者，这个页面可以算是很多人主动获取一些开源项目和活跃开发者最好的途径。

所以猫哥会在每周的周一给大家推荐一篇上周的 前端周趋势榜的 10 大项目，每月给大家推荐一篇上个月的 前端月趋势榜的 20 大项目，方便大家知道最近都开源了哪些好的前端项目，还有用到的主流前端技术栈又是哪些，以免错过了好的开源项目。

平时如何发现好的开源项目，可以看看这篇文章：GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目

1. headless-ui

一组完全没有样式的，完全可访问的 UI 组件，旨在与 Tailwind CSS 完美集成。

https://github.com/tailwindlabs/headlessui

2. react-flow

React Flow 是一个用于构建基于节点的图的库。您可以轻松实现自定义节点类型，并且它附带一些组件，例如迷你地图和图形控件。随意查看 示例 或阅读 博客文章 以开始使用。

https://github.com/wbkd/react-flow

3. Vite

Vite，一个基于浏览器原生 ES imports 的开发服务器。

利用浏览器去解析 imports，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。

同时不仅有 Vue 文件支持，还搞定了热更新，而且热更新的速度不会随着模块增多而变慢。针对生产环境则可以把同一份代码用 rollup 打。

虽然现在还比较粗糙，但这个方向我觉得是有潜力的，做得好可以彻底解决改一行代码等半天热更新的问题。

Vite 具有以下特点：

• 快速的冷启动
• 即时热模块更新（HMR，Hot Module Replacement）
• 真正按需编译

https://github.com/vitejs/vite

4. tailwindcss

一个实用程序优先的 CSS 框架，用于快速构建自定义用户界面。

无需离开您的 HTML，即可快速建立现代网站。

Tailwind CSS 是一个功能类优先的 CSS 框架，它集成了诸如 flex, pt-4, text-center 和 rotate-90 这样的的类，它们能直接在脚本标记语言中组合起来，构建出任何设计。

https://github.com/tailwindlabs/tailwindcss

5. tauri

Tauri 是用于为所有主要桌面平台构建超小型快速二进制文件的框架。开发人员可以集成可编译为 HTML，JS 和 CSS 的任何前端框架，以构建其用户界面。该应用程序的后端是带有锈源的二进制文件，带有可与前端进行交互的 API。

Tauri 应用程序中的用户界面目前 winit 在 macOS 和 Windows 上以及gtk 在 Linux 上通过 Tauri-team 培养并维护的 WRY 作为窗口处理库加以利用，WRY 可以利用 macOS 上的 WebKit，Windows 和 Linux 上的 WebKitGTK。

https://github.com/tauri-apps/tauri

6. vscode

Visual Studio Code 是一个运行于 OS X，Windows 和 Linux 之上的，针对于编写现代 Web 和云应用的跨平台编辑器。

也是当今天前端最流行的编辑器！

https://github.com/microsoft/vscode

7. Vue.js

Vue.js 是一个渐进式 JavaScript 框架，也是目前前端最流行的框架。

易用

• 已经会了 HTML、CSS、JavaScript？即刻阅读指南开始构建应用！

灵活

• 不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。

高效

• 20kB min+gzip 运行大小
• 超快虚拟 DOM
• 最省心的优化

https://github.com/vuejs/vue

Vue 相关的项目可以看看：推荐 7 个 Vue2、Vue3 源码解密分析的开源项目 和 Vue3 的学习教程汇总、源码解释项目、支持的 UI 组件库、优质实战项目 ，你会找到 Vue 的学习宝藏库。

8. React

一个声明性，高效且灵活的 JavaScript 库，用于构建用户界面。

声明式

React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据改变时 React 能有效地更新并正确地渲染组件。

以声明式编写 UI，可以让你的代码更加可靠，且方便调试。

组件化

创建拥有各自状态的组件，再由这些组件构成更加复杂的 UI。

组件逻辑使用 JavaScript 编写而非模板，因此你可以轻松地在应用中传递数据，并使得状态与 DOM 分离。

一次学习，随处编写

无论你现在正在使用什么技术栈，你都可以随时引入 React 来开发新特性，而不需要重写现有代码。

React 还可以使用 Node 进行服务器渲染，或使用 React Native 开发原生移动应用。

https://github.com/facebook/react

React 相关的项目可以看: 一个 React 技术揭秘的项目，自顶向下的 React 源码分析。

9. prisma

Prisma 是包含以下工具的下一代 ORM：

• Prisma Client：针对Node.js和TypeScript的自动生成且类型安全的查询生成器
• Prisma Migrate：声明性数据建模和迁移系统
• Prisma Studio：用于查看和编辑数据库中数据的GUI
• Prisma Client 可以在任何 Node.js 或 TypeScript 后端应用程序（包括无服务器应用程序和微服务）中使用。这可以是 REST API，GraphQL API，gRPC API 或任何其他需要数据库的东西。

https://github.com/prisma/prisma

10. next.js

这是一个用于 生产环境的 React 框架。

Next.js 为您提供生产环境所需的所有功能以及最佳的开发体验：包括静态及服务器端融合渲染、 支持 TypeScript、智能化打包、 路由预取等功能 无需任何配置。

https://github.com/vercel/next.js

11. three.js

官网对 Threejs 的介绍非常简单：“Javascript 3D library”。openGL 是一个跨平台 3D/2D 的绘图标准，WebGL 则是 openGL 在浏览器上的一个实现。web 前端开发人员可以直接用 WebGL 接口进行编程，但 WebGL 只是非常基础的绘图 API，需要编程人员有很多的数学知识、绘图知识才能完成 3D 编程任务，而且代码量巨大。Threejs 对 WebGL 进行了封装，让前端开发人员在不需要掌握很多数学知识和绘图知识的情况下，也能够轻松进行 web 3D 开发，降低了门槛，同时大大提升了效率。

https://github.com/mrdoob/three.js

12. tiptap

基于 ProseMirror 的无头，与框架无关且可扩展的 RTF 编辑器。

https://github.com/ueberdosis/tiptap

13. Cypress

Cypress 是为现代网络而构建的下一代前端测试工具，用于解决开发者和 QA 工程师在测试现代应用程序时面临的关键难题。

Cypress 简化了设置测试、编写测试、运行测试和调试测试，支持端到端测试、集成测试和单元测试，支持测试在浏览器中运行的任意内容。支持 Mac OS、Linux 和 Windows 平台。

https://github.com/cypress-io/cypress

14. deno

一个安全的 JavaScript 和 TypeScript 运行时。

出于多种原因，2020 年是非常特殊的一年。最重要的一个：5 年以来的第一次，新星的总冠军不是 Vue.js，而是 Deno……真是令人惊讶！

Deno 是 Node.js 的创建者 Ryan Dahl 的 JavaScript 运行时。

凭借 10 年的经验和对 Node.js 的迭代经验，它通常被视为 Node.js 的续集，因为它可以修复或改进许多要点。

https://github.com/denoland/deno

15. react-use

必不可少的 React Hooks 集合. libreact 的端口

https://github.com/streamich/react-use

16. esbuild

它是一个「JavaScript」Bundler 打包和压缩工具，它可以将「JavaScript」和「TypeScript」代码打包分发在网页上运行。

esbuild 是一个用 Go 语言编写的用于打包，压缩 Javascript 代码的工具库。

它最突出的特点就是打包速度极快 （extremely fast），下图是 esbuild 跟 webpack, rollup, Parcel 等打包工具打包效率的一个 benchmark:

https://github.com/evanw/esbuild

17. nuxt.js

易于使用的 Vue 框架, 使用 NuxtJS 充满信心地构建您的下一个 Vue.js 应用程序。一个 开源 框架，让 Web 开发变得简单而强大。

https://github.com/nuxt/nuxt.js

18. ant-design

一套企业级 UI 设计语言和 React 组件库。

✨ 特性

• 🌈 提炼自企业级中后台产品的交互语言和视觉风格。
• 📦 开箱即用的高质量 React 组件。
• 🛡 使用 TypeScript 开发，提供完整的类型定义文件。
• ⚙️ 全链路开发和设计工具体系。
• 🌍 数十个国际化语言支持。
• 🎨 深入每个细节的主题定制能力。

https://github.com/ant-design/ant-design

19. storybook

Storybook 是 UI 组件的开发环境，它允许开发者浏览组件库，查看每个组件的不同状态，以及交互地开发和测试组件。

Storybook 在 app 之外运行，这允许开发者独立地开发 UI 组件，这可以提高组件的重用性、可测试性和开发速度。所以可以快速构建，而不必担心应用程序特定的依赖关系。

特点：

• 附带了许多组件设计、文档、测试、交互性等内容
• 易于使用的 API 使它易于配置和扩展，甚至被扩展到支持移动的本地开发

https://github.com/storybookjs/storybook

20. vue-element-admin

vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui 实现。

它使用了最新的前端技术栈，内置了 i18n 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。

同时配套了系列教程文章，如何从零构建后一个完整的后台项目。

• 手摸手，带你用 vue 撸后台 系列一(基础篇)
• 手摸手，带你用 vue 撸后台 系列二(登录权限篇)
• 手摸手，带你用 vue 撸后台 系列三 (实战篇)
• 手摸手，带你用 vue 撸后台 系列四(vueAdmin 一个极简的后台基础模板)
• 手摸手，带你用 vue 撸后台 系列五(v4.0新版本)
• 手摸手，带你封装一个 vue component
• 手摸手，带你优雅的使用 icon
• 手摸手，带你用合理的姿势使用 webpack4（上）
• 手摸手，带你用合理的姿势使用 webpack4（下）

该项目还在一直维护中。

而且也是配有使用文档的，很不错。

Github Star 数 62.2K， Github 地址：

https://github.com/PanJiaChen/vue-element-admin

最后

好了，4 月的前端月趋势榜中最热门的 20 大前端开源项目就是上面那些了。

大家发现了没有，上面的项目中的很多个，猫哥都已经推荐过了的。

这个世界发展的真相就是马太效应，强者越强，弱者越弱。 开源项目也符合上面的规律，好的开源项目， Star 数会越来越多，会得到很多外力的推广(比如猫哥的推荐)，并且是呈现出指数型增长的。

---

前端GitHub 专注于挖掘 GitHub 上优秀的前端开源项目，并以专题的形式推荐，每专题大概 10 个好项目，每周会有一到三篇精华文章推送。

往期精文请看下方宝藏仓库，请慎入！

https://github.com/FrontEndGitHub/FrontEndGitHub

关注视频号，参与留言送书活动