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

相信很多人都沒有逛 GitHub 的習慣，因此總會有開源信息的不對稱，有哪些優秀的前端開源項目值得學習的也不知道。

從 2018 年開始，我就養成了每天逛 GitHub 的習慣，一般在早上上班前或者中午午休的時候都會逛一下。

看看每天都開源了哪些好的前端項目，還有用到的主流前端技術棧又是哪些，值得我去學習的。

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

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

平時如何發現好的開源項目，可以看看這篇文章：GitHub 上能挖礦的神仙技巧 - 如何發現優秀開源項目

1. winbox

WinBox 是一個專業的網頁 HTML5 窗口管理器：輕量級、出色的性能、無依賴、完全可定制、開源！

https://github.com/nextapps-de/winbox

2. edex-ui

一款比較火的開源軟件 ——edex-ui，它深受 DEX-UI 和 TRON Legacy 電影效果的啟發，是一個類似于科幻電腦界面的全屏桌面應用程序。

提供了可視化動態監測系統性能的圖表、資源列表、觸屏鍵盤等等，使其看起來非常高端大氣上檔次，另外還完美的支持終端操作，并且支持 Window、macOS、Linux 系統。

作為從小就喜歡黑科技的貓哥來說，已經按耐不住要裝 X 啦！

這個項目是基于 electron 和 node 的，前端如果覺得有意思，也可以 clone 下來玩一下哦！

項目地址：

https://github.com/GitSquared/edex-ui

3. ant-design

一套企業級 UI 設計語言和 React 組件庫。

? 特性

• ???? 提煉自企業級中后臺產品的交互語言和視覺風格。

• ???? 開箱即用的高質量 React 組件。

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

• ?? 全鏈路開發和設計工具體系。

• ???? 數十個國際化語言支持。

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

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

4. next.js

這是一個用于 生產環境的 React 框架。

Next.js 為您提供生產環境所需的所有功能以及最佳的開發體驗：包括靜態及服務器端融合渲染、 支持 TypeScript、智能化打包、 路由預取等功能 無需任何配置。

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

5. Vite

Vite，一個基于瀏覽器原生 ES imports 的開發服務器。

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

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

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

Vite 具有以下特點：

• 快速的冷啟動

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

• 真正按需編譯

https://github.com/vitejs/vite

6. tailwindcss

一個實用程序優先的 CSS 框架，用于快速構建自定義用戶界面。

無需離開您的 HTML，即可快速建立現代網站。

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

https://github.com/tailwindlabs/tailwindcss

7. React

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

聲明式

React 使創建交互式 UI 變得輕而易舉。為你應用的每一個狀態設計簡潔的視圖，當數據改變時 React 能有效地更新并正確地渲染組件。

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

組件化

創建擁有各自狀態的組件，再由這些組件構成更加復雜的 UI。

組件邏輯使用 JavaScript 編寫而非模板，因此你可以輕松地在應用中傳遞數據，并使得狀態與 DOM 分離。

一次學習，隨處編寫

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

React 還可以使用 Node 進行服務器渲染，或使用 React Native 開發原生移動應用。

https://github.com/facebook/react

React 相關的項目可以看: 一個 React 技術揭秘的項目，自頂向下的 React 源碼分析。

8. 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

9. vscode

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

也是當今天前端最流行的編輯器！

https://github.com/microsoft/vscode

10. storybook

Storybook 是 UI 組件的開發環境，它允許開發者瀏覽組件庫，查看每個組件的不同狀態，以及交互地開發和測試組件。

Storybook 在 app 之外運行，這允許開發者獨立地開發 UI 組件，這可以提高組件的重用性、可測試性和開發速度。所以可以快速構建，而不必擔心應用程序特定的依賴關系。

特點：

• 附帶了許多組件設計、文檔、測試、交互性等內容

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

https://github.com/storybookjs/storybook

11. Vue.js

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

易用

• 已經會了 HTML、CSS、JavaScript？即刻閱讀指南開始構建應用！

靈活

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

高效

• 20kB min+gzip 運行大小

• 超快虛擬 DOM

• 最省心的優化

https://github.com/vuejs/vue

Vue 相關的項目可以看看：推薦 7 個 Vue2、Vue3 源碼解密分析的開源項目 和 Vue3 的學習教程匯總、源碼解釋項目、支持的 UI 組件庫、優質實戰項目 ，你會找到 Vue 的學習寶藏庫。

12. 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

13. Cypress

Cypress 是為現代網絡而構建的下一代前端測試工具，用于解決開發者和 QA 工程師在測試現代應用程序時面臨的關鍵難題。

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

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

14. chakra-ui

快速構建可訪問的 React 應用程序

Chakra UI 提供了一組可訪問、可重用和可組合的 React 組件，使創建網站和應用程序變得非常容易。

特征 ????

• 易于造型：脈輪UI包含就像一組布局的構成要素中Box，并 Stack通過傳遞道具讓您輕松風格的組成部分。

• 靈活和可組合：Chakra UI 組件建立在 React UI Primitive 之上，以實現無限的可組合性。

• 無障礙。Chakra UI 組件遵循 WAI-ARIA 指南規范并具有正確的aria-*屬性。

• 黑暗模式 ????：Chakra UI 中的大多數組件都兼容暗模式。

https://github.com/chakra-ui/chakra-ui

15. axios

易用、簡潔且高效的 http 庫

Axios 是一個簡單的基于 Promise 的 HTTP 客戶端，用于瀏覽器和 node.js。Axios 在一個帶有非常可擴展的接口的小包中提供了一個簡單易用的庫。

https://github.com/axios/axios

16. TypeScript

為 JavaScript 提供靜態類型安全性的 JavaScript 的超集。

贏得了轉譯者與競爭對手 Flow 的戰斗，幾乎成為前端和后端開發的標準。

DefinitelyTyped 項目為 7000 多個軟件包提供了其他類型！

https://github.com/microsoft/TypeScript

更多學習資料請看 推薦 7 個學習 TypeScript 的寶庫。

17. 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

18. react-flow

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

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

19. esbuild

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

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

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

https://github.com/evanw/esbuild

20. 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

最后

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

大家發現了沒有，上面的項目中的很多個，貓哥都已經推薦過了的。

這個世界發展的真相就是馬太效應，強者越強，弱者越弱。

開源項目也符合上面的規律，好的開源項目， Star 數會越來越多，會得到很多外力的推廣(比如貓哥的推薦)，并且是呈現出指數型增長的。

---

因為上周去大西北旅游了一周，所以上周沒更新文章，有空寫一篇在大西北旅游途中的所看到的風景呀。

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

https://github.com/FrontEndGitHub/FrontEndGitHub

初次見面，也不知道送你們啥。微信搜索?前端GitHub，回復 電子書就送你 1000+本精華編程電子書；回復?1024送你一套完整的 前端視頻教程。

有需要的就來拿吧，絕對免費，無套路獲取。

往期精文

• 推薦 9 個 Node.js 學習、進階、debugging 分析、實戰 的重磅開源項目

• 猛增 110K Star！年增長數最多的 10 大頂級前端學習資源項目！

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

• Vue3 的學習教程匯總、源碼解釋項目、支持的 UI 組件庫、優質實戰項目

不知不覺，原創文章已經寫到第 45 期了呢，幾乎每一篇都是貓哥精心挑選的優質開源項目，推送的每一篇文章里面的項目幾乎都是對前端開發很有幫助的，大佬們看完文章后，順手來個一鍵三連吧，就當給貓哥一點鼓勵吧。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。