排名前十的 10 大頂級前端開源項目！1534K Star！

你們好，貓哥今天給你們推薦的是排名前十的 10 大前端開源項目，每一個都有 100K 左右的 Star，都開源了些啥？

相信不少人都不知道吧，今天貓哥帶你們來了解一下吧。

1. freeCodeCamp

• 323 K

FreeCodeCamp 是一個自由開源的學習編程的社區，致力於幫助人們利用零散時間學習編程。它的使命是 Learn to code and help nonprofits（學習編程，去幫助那些非盈利組織）。

FCC 涵蓋 HTML五、CSS、React、JavaScript、Database 等課程，遊戲化程度很是高，學員能夠經過線上聊天室和線下社區活動（Coffee and Code）相互幫助。

目前覆蓋全球 160+ 個國家、1000+ 個城市，40W+ 開發者在平臺學習。

FreeCodeCamp 國內的中文版請看 https://freecodecamp.cn （這是由國內愛好者翻譯的中文版本）

https://github.com/freeCodeCa...

2. Vue.js

• 182K

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

易用

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

靈活

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

高效

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

https://github.com/vuejs/vue

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

3. React

• 167K

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

聲明式

React 使建立交互式 UI 變得垂手可得。爲你應用的每個狀態設計簡潔的視圖，當數據改變時 React 能有效地更新並正確地渲染組件。

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

組件化

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

組件邏輯使用 JavaScript 編寫而非模板，所以你能夠輕鬆地在應用中傳遞數據，並使得狀態與 DOM 分離。

一次學習，隨處編寫

不管你如今正在使用什麼技術棧，你均可以隨時引入 React 來開發新特性，而不須要重寫現有代碼。

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

https://github.com/facebook/r...

React 相關的項目能夠看: 一個 React 技術揭祕的項目，自頂向下的 React 源碼分析。

4. awesome

• 157K

awesome：使人敬畏的；令人畏懼的；可怕的；極好的

就像咱們彙總咱們經常使用的電腦環境軟件同樣，咱們會找一些很是好的適合咱們用的軟件來作一個總結，awesome 項目也是如此，因爲 GitHub 上有大量的開源項目，開發者就會根據須要彙總一些經常使用的好用的資源，而且根據 awesome 的主題作一下劃分，開發語言等也有相似資源彙總。

https://github.com/sindresorh...

5. bootstrap

• 149K

流暢，直觀且功能強大的前端框架，可更快，更輕鬆地進行 Web 開發。

使用世界上最流行的前端開源工具包 Bootstrap 快速設計和自定義響應式移動優先站點，它具備 Sass 變量和 mixins，響應式網格系統，大量的預構建組件以及強大的 JavaScript 插件。

https://github.com/twbs/boots...

6. You-Dont-Know-JS

• 136K

該項目爲 YDNJS(You Don’t Know JS) 圖書系列，包含一系列深刻探討 JavaScript 語言核心機制的書籍。

內容大綱

• 入門與進階
• 做用域與閉包
• this 與對象原型
• 類型與文法
• 異步與性能
• ES6 與將來

https://github.com/getify/You...

7. vscode

• 114K

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

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

https://github.com/microsoft/...

8. javascript

• 107K

這個項目是 JavaScript 編程風格指南。

包含了：類型、對象、數組、字符串、函數、屬性、變量、提高、比較運算符 & 等號、塊、註釋、空白、逗號、分號、類型轉化、命名規則、存取器、構造函數、事件、模塊、jQuery、ECMAScript 5 兼容性、測試、性能、資源、JavaScript 風格指南說明

https://github.com/airbnb/jav...

9. javascript-algorithms

• 103K

該倉庫包含了多種基於 JavaScript 的算法與數據結構。

每種算法和數據結構都有本身的 README，包含相關說明和連接，以便進一步閱讀 (還有 YouTube 視頻) 。

數據結構包含了 鏈表、雙向鏈表、隊列、棧、哈希表(散列)、堆、優先隊列、字典樹、樹、優先隊列、二叉查找樹、AVL 樹、紅黑樹、線段樹、樹狀數組、圖、並查集、布隆過濾器

算法包含了 算法主題 和 算法範式。

其中算法主題又包含了：數學、集合、字符串、搜索、排序、鏈表、樹、圖、加密、機器學習。

算法範式：算法範式是一種通用方法，基於一類算法的設計。這是比算法更高的抽象，就像算法是比計算機程序更高的抽象。

算法範式包含了：BF 算法、貪心法、分治法、動態編程、回溯法、Branch & Bound 等等。

這項目還出了對應的教學視頻，總共 81 個視頻講解，每一個視頻大概 5 - 10分鐘左右，還能學習英語哦 😉

youtube 的教學視頻： https://www.youtube.com/playl...

貓哥以前學習算法的時候，也在這個項目中收益良多呢！

並且這個項目還一直有維護和更新內容哦！真的很是不錯的一個項目！

https://github.com/trekhleb/j...

更多算法相關的項目推薦能夠看看這篇文章：7 個 GitHub 上超火的前端學習的數據結構與算法項目

10. d3

• 96K

使用 SVG、Canvas 和 HTML 使數據生動起來。

D3（或D3.js）是一個 JavaScript 庫，用於使用 Web 標準可視化數據。D3 可幫助您使用SVG，Canvas 和 HTML 使數據栩栩如生。D3 將強大的可視化和交互技術與數據驅動的 DOM 操做方法相結合，爲您提供現代瀏覽器的所有功能，併爲您的數據設計正確的可視界面提供了自由。

https://github.com/d3/d3

最後

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

前端GitHub 專一於挖掘 GitHub 上優秀的前端開源項目，並以專題的形式推薦，每專題大概 10 個好項目，每週會有一到三篇精華文章推送。

原文連接在下方寶庫：

https://github.com/FrontEndGitHub/FrontEndGitHub

往期精文

• 前端最流行的 10 大頂級開源項目！猛增 174K Star！
• 猛增 110K Star！年增加數最多的 10 大頂級前端學習資源項目！
• 推薦 7 個 Vue二、Vue3 源碼解密分析的開源項目
• Vue3 的學習教程彙總、源碼解釋項目、支持的 UI 組件庫、優質實戰項目

微信搜 「前端GitHub」，回覆 「電子書」 便可以得到下面 300 本技術精華書籍哦，貓哥 wx：CB834301747 。

不知不覺，原創文章已經寫到第 39 期了呢，幾乎每一篇都是貓哥精心挑選的優質開源項目，推送的每一篇文章裏面的項目幾乎都是對前端開發頗有幫助的。

原創不易，一篇優質的文章都是要肝幾個晚上才能肝出來的，花費不少時間、精力去篩選和寫推薦理由，大佬們看完文章後順手點個贊或者轉發吧，就當給貓哥一點鼓勵吧。