大家好，我是你們的 貓哥，那個不喜歡吃魚、又不喜歡喵 的超級貓 ~

GitHub 上面有個 Trending 榜 (趨勢榜)，在 Trending 頁面，你可以看到最近一些熱門的開源項目或者開發(fā)者，這個頁面可以算是很多人主動獲取一些開源項目和活躍開發(fā)者最好的途徑。

所以貓哥會在每周的周一給大家推薦一篇上周的 前端周趨勢榜的 10 大項目，每月給大家推薦一篇上個月的 前端月趨勢榜的 20 大項目，方便大家知道最近都開源了哪些好的前端項目，還有用到的主流前端技術(shù)棧又是哪些，以免錯過了好的開源項目。

平時如何發(fā)現(xiàn)好的開源項目，可以看看這篇文章：GitHub 上能挖礦的神仙技巧 - 如何發(fā)現(xiàn)優(yōu)秀開源項目

1. headless-ui

一組完全沒有樣式的，完全可訪問的 UI 組件，旨在與 Tailwind CSS 完美集成。

https://github.com/tailwindlabs/headlessui

2. react-flow

React Flow 是一個用于構(gòu)建基于節(jié)點的圖的庫。您可以輕松實現(xiàn)自定義節(jié)點類型，并且它附帶一些組件，例如迷你地圖和圖形控件。隨意查看 示例 或閱讀 博客文章 以開始使用。

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

3. Vite

Vite，一個基于瀏覽器原生 ES imports 的開發(fā)服務(wù)器。

利用瀏覽器去解析 imports，在服務(wù)器端按需編譯返回，完全跳過了打包這個概念，服務(wù)器隨起隨用。

同時不僅有 Vue 文件支持，還搞定了熱更新，而且熱更新的速度不會隨著模塊增多而變慢。針對生產(chǎn)環(huán)境則可以把同一份代碼用 rollup 打。

雖然現(xiàn)在還比較粗糙，但這個方向我覺得是有潛力的，做得好可以徹底解決改一行代碼等半天熱更新的問題。

Vite 具有以下特點：

• 快速的冷啟動

• 即時熱模塊更新（HMR，Hot Module Replacement）

• 真正按需編譯

https://github.com/vitejs/vite

4. tailwindcss

一個實用程序優(yōu)先的 CSS 框架，用于快速構(gòu)建自定義用戶界面。

無需離開您的 HTML，即可快速建立現(xiàn)代網(wǎng)站。

Tailwind CSS 是一個功能類優(yōu)先的 CSS 框架，它集成了諸如 flex, pt-4, text-center 和 rotate-90 這樣的的類，它們能直接在腳本標(biāo)記語言中組合起來，構(gòu)建出任何設(shè)計。

https://github.com/tailwindlabs/tailwindcss

5. tauri

Tauri 是用于為所有主要桌面平臺構(gòu)建超小型快速二進制文件的框架。開發(fā)人員可以集成可編譯為 HTML，JS 和 CSS 的任何前端框架，以構(gòu)建其用戶界面。該應(yīng)用程序的后端是帶有銹源的二進制文件，帶有可與前端進行交互的 API。

Tauri 應(yīng)用程序中的用戶界面目前 winit 在 macOS 和 Windows 上以及 gtk 在 Linux 上通過 Tauri-team 培養(yǎng)并維護的 WRY 作為窗口處理庫加以利用，WRY 可以利用 macOS 上的 WebKit，Windows 和 Linux 上的 WebKitGTK。

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

6. vscode

Visual Studio Code 是一個運行于 OS X，Windows 和 Linux 之上的，針對于編寫現(xiàn)代 Web 和云應(yīng)用的跨平臺編輯器。

也是當(dāng)今天前端最流行的編輯器！

https://github.com/microsoft/vscode

7. Vue.js

Vue.js 是一個漸進式 JavaScript 框架，也是目前前端最流行的框架。

易用

• 已經(jīng)會了 HTML、CSS、JavaScript？即刻閱讀指南開始構(gòu)建應(yīng)用！

靈活

• 不斷繁榮的生態(tài)系統(tǒng)，可以在一個庫和一套完整框架之間自如伸縮。

高效

• 20kB min+gzip 運行大小

• 超快虛擬 DOM

• 最省心的優(yōu)化

https://github.com/vuejs/vue

Vue 相關(guān)的項目可以看看：推薦 7 個 Vue2、Vue3 源碼解密分析的開源項目 和 Vue3 的學(xué)習(xí)教程匯總、源碼解釋項目、支持的 UI 組件庫、優(yōu)質(zhì)實戰(zhàn)項目 ，你會找到 Vue 的學(xué)習(xí)寶藏庫。

8. React

一個聲明性，高效且靈活的 JavaScript 庫，用于構(gòu)建用戶界面。

聲明式

React 使創(chuàng)建交互式 UI 變得輕而易舉。為你應(yīng)用的每一個狀態(tài)設(shè)計簡潔的視圖，當(dāng)數(shù)據(jù)改變時 React 能有效地更新并正確地渲染組件。

以聲明式編寫 UI，可以讓你的代碼更加可靠，且方便調(diào)試。

組件化

創(chuàng)建擁有各自狀態(tài)的組件，再由這些組件構(gòu)成更加復(fù)雜的 UI。

組件邏輯使用 JavaScript 編寫而非模板，因此你可以輕松地在應(yīng)用中傳遞數(shù)據(jù)，并使得狀態(tài)與 DOM 分離。

一次學(xué)習(xí)，隨處編寫

無論你現(xiàn)在正在使用什么技術(shù)棧，你都可以隨時引入 React 來開發(fā)新特性，而不需要重寫現(xiàn)有代碼。

React 還可以使用 Node 進行服務(wù)器渲染，或使用 React Native 開發(fā)原生移動應(yīng)用。

https://github.com/facebook/react

React 相關(guān)的項目可以看: 一個 React 技術(shù)揭秘的項目，自頂向下的 React 源碼分析。

9. prisma

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

• Prisma Client：針對Node.js和TypeScript的自動生成且類型安全的查詢生成器

• Prisma Migrate：聲明性數(shù)據(jù)建模和遷移系統(tǒng)

• Prisma Studio：用于查看和編輯數(shù)據(jù)庫中數(shù)據(jù)的GUI

• Prisma Client 可以在任何 Node.js 或 TypeScript 后端應(yīng)用程序（包括無服務(wù)器應(yīng)用程序和微服務(wù)）中使用。這可以是 REST API，GraphQL API，gRPC API 或任何其他需要數(shù)據(jù)庫的東西。

https://github.com/prisma/prisma

10. next.js

這是一個用于 生產(chǎn)環(huán)境的 React 框架。

Next.js 為您提供生產(chǎn)環(huán)境所需的所有功能以及最佳的開發(fā)體驗：包括靜態(tài)及服務(wù)器端融合渲染、 支持 TypeScript、智能化打包、 路由預(yù)取等功能 無需任何配置。

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

11. three.js

官網(wǎng)對 Threejs 的介紹非常簡單：“Javascript 3D library”。openGL 是一個跨平臺 3D/2D 的繪圖標(biāo)準(zhǔn)，WebGL 則是 openGL 在瀏覽器上的一個實現(xiàn)。web 前端開發(fā)人員可以直接用 WebGL 接口進行編程，但 WebGL 只是非常基礎(chǔ)的繪圖 API，需要編程人員有很多的數(shù)學(xué)知識、繪圖知識才能完成 3D 編程任務(wù)，而且代碼量巨大。Threejs 對 WebGL 進行了封裝，讓前端開發(fā)人員在不需要掌握很多數(shù)學(xué)知識和繪圖知識的情況下，也能夠輕松進行 web 3D 開發(fā)，降低了門檻，同時大大提升了效率。

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

12. tiptap

基于 ProseMirror 的無頭，與框架無關(guān)且可擴展的 RTF 編輯器。

https://github.com/ueberdosis/tiptap

13. Cypress

Cypress 是為現(xiàn)代網(wǎng)絡(luò)而構(gòu)建的下一代前端測試工具，用于解決開發(fā)者和 QA 工程師在測試現(xiàn)代應(yīng)用程序時面臨的關(guān)鍵難題。

Cypress 簡化了設(shè)置測試、編寫測試、運行測試和調(diào)試測試，支持端到端測試、集成測試和單元測試，支持測試在瀏覽器中運行的任意內(nèi)容。支持 Mac OS、Linux 和 Windows 平臺。

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

14. deno

一個安全的 JavaScript 和 TypeScript 運行時。

出于多種原因，2020 年是非常特殊的一年。最重要的一個：5 年以來的第一次，新星的總冠軍不是 Vue.js，而是 Deno……真是令人驚訝！

Deno 是 Node.js 的創(chuàng)建者 Ryan Dahl 的 JavaScript 運行時。

憑借 10 年的經(jīng)驗和對 Node.js 的迭代經(jīng)驗，它通常被視為 Node.js 的續(xù)集，因為它可以修復(fù)或改進許多要點。

https://github.com/denoland/deno

15. react-use

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

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

16. esbuild

它是一個「JavaScript」Bundler 打包和壓縮工具，它可以將「JavaScript」和「TypeScript」代碼打包分發(fā)在網(wǎng)頁上運行。

esbuild 是一個用 Go 語言編寫的用于打包，壓縮 Javascript 代碼的工具庫。

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

https://github.com/evanw/esbuild

17. nuxt.js

易于使用的 Vue 框架, 使用 NuxtJS 充滿信心地構(gòu)建您的下一個 Vue.js 應(yīng)用程序。一個 開源 框架，讓 Web 開發(fā)變得簡單而強大。

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

18. ant-design

一套企業(yè)級 UI 設(shè)計語言和 React 組件庫。

? 特性

• ???? 提煉自企業(yè)級中后臺產(chǎn)品的交互語言和視覺風(fēng)格。

• ???? 開箱即用的高質(zhì)量 React 組件。

• ???? 使用 TypeScript 開發(fā)，提供完整的類型定義文件。

• ?? 全鏈路開發(fā)和設(shè)計工具體系。

• ???? 數(shù)十個國際化語言支持。

• ???? 深入每個細節(jié)的主題定制能力。

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

19. storybook

Storybook 是 UI 組件的開發(fā)環(huán)境，它允許開發(fā)者瀏覽組件庫，查看每個組件的不同狀態(tài)，以及交互地開發(fā)和測試組件。

Storybook 在 app 之外運行，這允許開發(fā)者獨立地開發(fā) UI 組件，這可以提高組件的重用性、可測試性和開發(fā)速度。所以可以快速構(gòu)建，而不必?fù)?dān)心應(yīng)用程序特定的依賴關(guān)系。

特點：

• 附帶了許多組件設(shè)計、文檔、測試、交互性等內(nèi)容

• 易于使用的 API 使它易于配置和擴展，甚至被擴展到支持移動的本地開發(fā)

https://github.com/storybookjs/storybook

20. vue-element-admin

vue-element-admin 是一個后臺前端解決方案，它基于 vue 和 element-ui 實現(xiàn)。

它使用了最新的前端技術(shù)棧，內(nèi)置了 i18n 國際化解決方案，動態(tài)路由，權(quán)限驗證，提煉了典型的業(yè)務(wù)模型，提供了豐富的功能組件，它可以幫助你快速搭建企業(yè)級中后臺產(chǎn)品原型。

同時配套了系列教程文章，如何從零構(gòu)建后一個完整的后臺項目。

• 手摸手，帶你用 vue 擼后臺 系列一(基礎(chǔ)篇)

• 手摸手，帶你用 vue 擼后臺 系列二(登錄權(quán)限篇)

• 手摸手，帶你用 vue 擼后臺 系列三 (實戰(zhàn)篇)

• 手摸手，帶你用 vue 擼后臺 系列四(vueAdmin 一個極簡的后臺基礎(chǔ)模板)

• 手摸手，帶你用 vue 擼后臺 系列五(v4.0新版本)

• 手摸手，帶你封裝一個 vue component

• 手摸手，帶你優(yōu)雅的使用 icon

• 手摸手，帶你用合理的姿勢使用 webpack4（上）

• 手摸手，帶你用合理的姿勢使用 webpack4（下）

該項目還在一直維護中。

而且也是配有使用文檔的，很不錯。

Github Star 數(shù) 62.2K， Github 地址：

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

最后

好了，4 月的前端月趨勢榜中最熱門的 20 大前端開源項目就是上面那些了。

大家發(fā)現(xiàn)了沒有，上面的項目中的很多個，貓哥都已經(jīng)推薦過了的。

這個世界發(fā)展的真相就是馬太效應(yīng)，強者越強，弱者越弱。 開源項目也符合上面的規(guī)律，好的開源項目， Star 數(shù)會越來越多，會得到很多外力的推廣(比如貓哥的推薦)，并且是呈現(xiàn)出指數(shù)型增長的。

---

前端GitHub 專注于挖掘 GitHub 上優(yōu)秀的前端開源項目，并以專題的形式推薦，每專題大概 10 個好項目，每周會有一到三篇精華文章推送。

往期精文請看下方寶藏倉庫，請慎入！

https://github.com/FrontEndGitHub/FrontEndGitHub

微信搜 “前端GitHub”，回復(fù) “電子書” 即可以獲得下面 300本技術(shù)精華書籍哦，貓哥 wx：CB834301747。

往期精文

• 前端最流行的 10 大頂級開源項目！猛增 174K Star！

• 猛增 110K Star！年增長數(shù)最多的 10 大頂級前端學(xué)習(xí)資源項目！

• 推薦 7 個 Vue2、Vue3 源碼解密分析的開源項目

• Vue3 的學(xué)習(xí)教程匯總、源碼解釋項目、支持的 UI 組件庫、優(yōu)質(zhì)實戰(zhàn)項目

• 程序員必備的 10 大 GitHub 倉庫，前端占了 7 個！

不知不覺，原創(chuàng)文章已經(jīng)寫到第 42 期了呢，幾乎每一篇都是貓哥精心挑選的優(yōu)質(zhì)開源項目，推送的每一篇文章里面的項目幾乎都是對前端開發(fā)很有幫助的。

原創(chuàng)不易，一篇優(yōu)質(zhì)的文章都是要肝幾個晚上才能肝出來的，花費很多時間、精力去篩選和寫推薦理由，大佬們看完文章后，順手來個一鍵三連吧，就當(dāng)給貓哥一點鼓勵吧。

總結(jié)

以上是生活随笔為你收集整理的前端月趋势榜：4 月最热门的 20 个前端开源项目 - 2104的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。