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

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

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ā)服務器。

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

同時不僅有 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 這樣的的類，它們能直接在腳本標記語言中組合起來，構(gòu)建出任何設計。

https://github.com/tailwindlabs/tailwindcss

5. tauri

 

 

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

Tauri 應用程序中的用戶界面目前 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 和云應用的跨平臺編輯器。

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

 

 

https://github.com/microsoft/vscode

7. Vue.js

 

 

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

易用

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

靈活

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

高效

• 20kB min+gzip 運行大小

• 超快虛擬 DOM

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

https://github.com/vuejs/vue

8. React

 

 

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

聲明式

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

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

組件化

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

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

一次學習，隨處編寫

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

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

https://github.com/facebook/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 后端應用程序（包括無服務器應用程序和微服務）中使用。這可以是 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)及服務器端融合渲染、 支持 TypeScript、智能化打包、 路由預取等功能 無需任何配置。

 

 

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

11. three.js

 

[[397554]]

 

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

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

12. tiptap

 

 

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

https://github.com/ueberdosis/tiptap

13. Cypress

 

 

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

Cypress 簡化了設置測試、編寫測試、運行測試和調(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ù)集，因為它可以修復或改進許多要點。

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 應用程序。一個 開源 框架，讓 Web 開發(fā)變得簡單而強大。

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

18. ant-design

 

[[397556]]

 

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

:sparkles: 特性

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

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

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

• ⚙️ 全鏈路開發(fā)和設計工具體系。

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

• :art: 深入每個細節(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)建，而不必擔心應用程序特定的依賴關系。

特點：

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

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

 

 

https://github.com/storybookjs/storybook

20. vue-element-admin

 

 

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

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

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

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

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

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

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

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

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

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

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

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

該項目還在一直維護中。

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

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

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