本文轉載自微信公眾號「前端GitHub」，作者貓哥。轉載本文請聯系前端GitHub公眾號。

大家新好呀，我是你們的 貓哥，那個不喜歡吃魚、又不喜歡喵 的超級貓又在線營業啦 ~

過年期間，不知道大家過得開不開心，反正貓哥過的挺開心的 ??

新的一年，又是時候學習了，先來看看排行榜吧，知道一下目前最流行的項目都有哪些。

1. zx

年度流行項目是 zx，一個由谷歌推出的全新的工具，可用于以 JavaScript 或 TypeScript 編寫簡單的命令行腳本。

基本上它可以讓你在代碼中嵌入任何 bash 表達式(ls, cat, git...等任何命令!)，并 await 使用 JavaScript 模板字符串 的結果。

它引入了由幾個流行的軟件包提供的實用工具：

• node-fetch 與瀏覽器中 fetch 有著相同的 API， 可創建 HTTP 請求。
• fs-extra 可處理文件系統操作。
• globby 以用戶友好模式來匹配給定的文件名。

??https://github.com/google/zx??

2. vite

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

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

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

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

Vite 具有以下特點：

• 快速的冷啟動
• 即時熱模塊更新(HMR，Hot Module Replacement)
• 真正按需編譯

??https://github.com/vitejs/vite??

3. next

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

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

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

4. react

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

聲明式

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

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

組件化

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

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

一次學習，隨處編寫

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

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

https://github.com/facebook/reactReact 相關的項目可以看: 一個 React 技術揭秘的項目，自頂向下的 React 源碼分析。

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

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

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

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

??https://github.com/tailwindlabs/tailwindcss??

7. vscode

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

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

??https://github.com/microsoft/vscode??

8. slidev

為開發者打造的演示文稿工具。

Slidev (slide + dev, /sl??d?v/) 是基于 Web 的幻燈片制作和演示工具。它旨在讓開發者專注在 Markdown 中編寫內容，同時擁有支持 HTML 和 Vue 組件的能力，并且能夠呈現像素級完美的布局，還在你的演講稿中內置了互動的演示樣例。

它使用了功能豐富的 markdown 文件來生成精美的幻燈片，具有即時重載的體驗。它還擁有很多內置的集成功能，如實時編碼、導出 PDF、演講錄制等。由于 Slidev 是由 web 驅動的，因此你可以使用它進行任何操作 —— 具有無限的可能性。

??https://github.com/slidevjs/slidev??

9. nocodb

NocoDB 是 Airtable 的開源替代方案，可以“一鍵”將 MySQL、PostgreSQL、SQL Server、SQLite 和 MariaDB 轉換為智能電子表格，提供了豐富的電子表格界面，支持搜索、排序、過濾、隱藏列等功能。

??https://github.com/nocodb/nocodb??

10. vue

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

易用

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

靈活

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

高效

• 20kB min+gzip 運行大小
• 超快虛擬 DOM
• 最省心的優化

https://github.com/vuejs/vueVue

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