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

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

1. headless-ui

 

 

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

https://github.com/tailwindlabs/headlessui

2. react-flow

 

 

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

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

3. Vite

 

 

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

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

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

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

Vite 具有以下特點(diǎn)：

• 快速的冷啟動(dòng)

• 即時(shí)熱模塊更新（HMR，Hot Module Replacement）

• 真正按需編譯

https://github.com/vitejs/vite

4. tailwindcss

 

 

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

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

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

https://github.com/tailwindlabs/tailwindcss

5. tauri

 

 

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

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

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

6. vscode

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

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

 

 

https://github.com/microsoft/vscode

7. Vue.js

 

 

Vue.js 是一個(gè)漸進(jìn)式 JavaScript 框架，也是目前前端最流行的框架。

易用

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

靈活

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

高效

• 20kB min+gzip 運(yùn)行大小

• 超快虛擬 DOM

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

https://github.com/vuejs/vue

8. React

 

 

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

聲明式

React 使創(chuàng)建交互式 UI 變得輕而易舉。為你應(yīng)用的每一個(gè)狀態(tài)設(shè)計(jì)簡(jiǎn)潔的視圖，當(dāng)數(shù)據(jù)改變時(shí) 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ù)棧，你都可以隨時(shí)引入 React 來開發(fā)新特性，而不需要重寫現(xiàn)有代碼。

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

https://github.com/facebook/react

9. prisma

 

 

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

• Prisma Client：針對(duì)Node.js和TypeScript的自動(dòng)生成且類型安全的查詢生成器

• 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

 

 

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

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

 

 

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

11. three.js

 

[[397554]]

 

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

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

12. tiptap

 

 

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

https://github.com/ueberdosis/tiptap

13. Cypress

 

 

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

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

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

14. deno

 

 

一個(gè)安全的 JavaScript 和 TypeScript 運(yùn)行時(shí)。

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

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

憑借 10 年的經(jīng)驗(yàn)和對(duì) Node.js 的迭代經(jīng)驗(yàn)，它通常被視為 Node.js 的續(xù)集，因?yàn)樗梢孕迯?fù)或改進(jìn)許多要點(diǎn)。

https://github.com/denoland/deno

15. react-use

 

 

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

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

16. esbuild

 

 

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

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

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

 

 

https://github.com/evanw/esbuild

17. nuxt.js

 

 

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

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

18. ant-design

 

[[397556]]

 

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

:sparkles: 特性

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

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

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

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

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

• :art: 深入每個(gè)細(xì)節(jié)的主題定制能力。

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

19. storybook

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

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

特點(diǎn)：

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

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

 

 

https://github.com/storybookjs/storybook

20. vue-element-admin

 

 

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

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

同時(shí)配套了系列教程文章，如何從零構(gòu)建后一個(gè)完整的后臺(tái)項(xiàng)目。

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

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

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

• 手摸手，帶你用 vue 擼后臺(tái) 系列四(vueAdmin 一個(gè)極簡(jiǎn)的后臺(tái)基礎(chǔ)模板)

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

• 手摸手，帶你封裝一個(gè) vue component

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

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

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

該項(xiàng)目還在一直維護(hù)中。

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

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

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