前端月趨勢榜：4 月最熱門的 20 個前端開源項目
GitHub 上面有個 Trending 榜 (趨勢榜)，在 Trending 頁面，你可以看到最近一些熱門的開源項目或者開發者，這個頁面可以算是很多人主動獲取一些開源項目和活躍開發者最好的途徑。
所以貓哥會在每周的周一給大家推薦一篇上周的 前端周趨勢榜的 10 大項目 ，每月給大家推薦一篇上個月的 前端月趨勢榜的 20 大項目 ，方便大家知道最近都開源了哪些好的前端項目，還有用到的主流前端技術棧又是哪些，以免錯過了好的開源項目。
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
8. React
一個聲明性，高效且靈活的 JavaScript 庫，用于構建用戶界面。
聲明式
React 使創建交互式 UI 變得輕而易舉。為你應用的每一個狀態設計簡潔的視圖，當數據改變時 React 能有效地更新并正確地渲染組件。
以聲明式編寫 UI，可以讓你的代碼更加可靠，且方便調試。
組件化
創建擁有各自狀態的組件，再由這些組件構成更加復雜的 UI。
組件邏輯使用 JavaScript 編寫而非模板，因此你可以輕松地在應用中傳遞數據，并使得狀態與 DOM 分離。
一次學習，隨處編寫
無論你現在正在使用什么技術棧，你都可以隨時引入 React 來開發新特性，而不需要重寫現有代碼。
React 還可以使用 Node 進行服務器渲染，或使用 React Native 開發原生移動應用。
https://github.com/facebook/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 只是非?；A的繪圖 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 組件庫。
:sparkles: 特性
-
:rainbow: 提煉自企業級中后臺產品的交互語言和視覺風格。
-
:package: 開箱即用的高質量 React 組件。
-
使用 TypeScript 開發，提供完整的類型定義文件。
-
⚙️ 全鏈路開發和設計工具體系。
-
:earth_africa: 數十個國際化語言支持。
-
:art: 深入每個細節的主題定制能力。
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
