1.9k Views in前端開發

史上最全前端框架庫匯總

史上最全前端框架庫匯總

導讀

本文主要收錄一些常用框架庫文檔以及UI元件庫。

正文

Vue

  • Vue2.0：Vue2.0 文檔
  • Vue3.0：Vue3.0 文檔
  • Vue-Router：Vue.js 官方的路由管理器。
  • Vuex：Vue.js 應用程式開發的狀態管理模式。
  • Element-UI：餓了么UI元件庫
  • View UI：一套基於 Vue.js 的開源 UI 元件庫，主要服務於 PC 介面的中後台產品。
  • Vuetify：用於建構功能豐富、快速的應用程式。
  • Buefy-UI： 簡單且輕量的UI庫。
  • Quasar： 編寫代碼一次並同時將其部署為網站、移動應用和/或Electron應用。
  • Vue Material： 一個輕量級的框架， 建立在谷歌的 Material Design 基礎上。
  • Vux： 基於WeUI和Vue（2.x）開發的移動端UI元件庫，主要服務於微信頁面。
  • Vant： 有讚前端團隊開源的移動端元件庫。
  • NutUI： 一套京東風格的輕量級移動端Vue元件庫。
  • YDUI Touch一隻基於Vue2.x的移動端&微信UI。
  • Ant Design Vue： Vue UI元件庫，開箱即用的高品質 Vue 元件。
  • Wot Design： 根據京東商家側的UI設計規範（京麥移動端設計規範）開發，旨在給商家提供統一的UI交互，同時提高研發的開發效率。
  • VuePress： Vue 驅動的靜態網站產生器。
  • Gridsome： 基於 Vue.js 構建的 Jamstack 框架。 讓開發人員可以輕鬆地建構靜態生成的網站和應用程式，這些網站和應用程式 。
  • better-scroll： 解決移動端（已支援PC）各種滾動場景需求的外掛程式。
  • vue-multiselect： Vue多選。
  • vue-table： vue-table-資料表簡化！
  • vue-infinite-scroll： vue 的無限滾動外掛程式。
  • vue-progressbar： Vue 進度條外掛程式。
  • vue-devtools： Vue 遊覽器除錯外掛程式。

React

Angular

  • Angular文件： 一個應用設計框架與開發平臺，用於創建高效、複雜、精緻的單頁面應用。
  • Ant Design Angular： Ant Design 設計規範的 Angular UI 元件庫。
  • DevUI： 一款開源免費的企業中後台產品前端的通用解決方案。
  • NG-NEST： 一個開源的 Web 應用程式框架，基於 Angular 和 Nest ，主要用於研發企業級中後台產品。
  • Ant Design Mobile Angular： Ant Design 設計規範的 Angular UI 元件庫（移動端）。
  • Angular Material： 使用橫跨 Web、Mobile 和桌面環境的綜合性元件庫建構現代應用。
  • Angular-animate:
  • AngularJS入門教程

TypeScript

Flutter

微信小程式

  • 微信小程序文檔
  • TouchUI WX： 一套完全免費的微信小程式開發框架，擴展了小程式的能力。
  • WePY：讓小程式支援元件化開發的框架，一個最受歡迎的小程式框架.
  • mpvue：一個使用 Vue.js 開發小程式的前端框架。
  • taro： 一個開放式跨端跨框架解決方案，支援使用 React/Vue/Nerv 等框架來開發 微信 / 京東 / 百度 / 支付寶 / 字節跳動 / QQ 小程式 / H5 等應用。
  • uni-app： 一個使用 Vue.js 開發所有前端應用的框架，開發者編寫一套代碼，可發佈到iOS、Android、Web（回應式）、以及各種小程式（微信/支付寶/百度/頭條/QQ/釘釘/淘寶）、快應用等多個平臺。

工具庫

  • jQuery： 一個高效、精簡並且功能豐富的 JAVAScript 工具庫。
  • Zepto.js： 一個輕巧級的針對現代進階瀏覽器的 JavaScript 函式庫， 它與jquery有著類似的 api。
  • Moment.js： JavaScript 日期處理類庫。
  • date-fns.js： 一個現代的 JavaScript 日期工具類庫，提供了最全面、最簡單和一致的工具集，用於在瀏覽器和 Node.js 中操作。
  • Underscore.js：是一個JavaScript實用庫，提供了一整套函數式程式設計的實用功能。
  • Sugar.js： 一個可以用來處理原生物件的庫。
  • Math.js： Javascript 擴展數學庫。
  • Lodash.js：一個一致性、模組化、高性能的 JavaScript 實用工具庫。
  • cnhammer.js： 一個可以識別觸摸、滑鼠和點擊事件等手勢的開放源碼類庫。
  • Ramda.js：一款實用的 JavaScript 函數式程式設計庫。
  • Axios.js：一個基於 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。
  • lazy.js： 功能類似 Underscore 和 Lodash。
  • Voca.js： 一個用於操作字串的 Javascript 庫。
  • Babel.js： JavaScript 編譯器。
  • RequireJS： JavaScript模組載入器。
  • RxJS： 使用 Observables 的回應式程式設計的庫，它使編寫非同步或基於回檔的程式碼更容易。
  • sea.js： 一個適用於 Web 瀏覽器端的模組載入器。
  • Backbone.js： 為複雜Javascript應用程式提供模型（models）、集合（collections）、視圖（views）的結構。 英文
  • reveal.js： 一個能夠幫助我們很輕易地使用 HTML 創建一個漂亮的演示文稿的框架。
  • Cycle.js： 一個函數式和回應式的 JavaScript 框架，編寫可觀測代碼。
  • system.js：一個通用的模組載入器，它能在瀏覽器或者 NodeJS 上動態載入模組，並且支援 CommonJS、AMD、全域模組物件和 ES6 模組。
  • ESL.js：一個瀏覽器端、符合AMD的標準載入器，適合用於現代Web瀏覽器端應用的入口與模組管理。
  • expect.js： 簡約的、適用於 Node.js 和瀏覽器端的 BDD 式斷言工具。
  • can.js： 用戶端JAVAScript架構庫的集合。
  • most.js： 用於反應式程式設計的工具組。
  • foundation.js： 一個支援回應式佈局的前端框架。
  • Semantic.js： 一款開發框架，幫助開發者使用對人類友好的 HTML 語言構建優雅的回應式佈局。
  • Bulma： 一個基於 Flexbox 佈局技術的免費、開源的現代 CSS 框架。
  • Phaser.js： 一款快速、免費以及開源 HTML5 遊戲框架，它支援 WebGL 和 Canvas 兩種渲染模式，可以在任何 Web 瀏覽器環境下運行，遊戲可以通過第三方工具轉為 iOS、Android 支援的 Native APP，允許使用 JavaScript 和 TypeScript 進行開發。
  • Request.js：針對瀏覽器和節點的請求庫。
  • Hammer.js： 一個開源的，輕量級的 JavaScript 庫，它可以在不需要依賴其他東西的情況下識別觸摸，滑鼠事件。
  • Ember.js： 一個開源的 JavaScript 用戶端框架，用於開發 Web 應用程式並使用 MVC（模型 - 視圖 - 控制器）架構模式。
  • handlebars.js： JavaScript 語義範本庫，透過對檢視（view）和資料的分離來快速構建 Web 樣本。
  • jqueryui： jQuery UI 是建立在 jQuery JavaScript 庫上的一組使用者介面互動、特效、小部件及主題。
  • Sizzle.js： 一個純 JavaScript 實現的 CSS 選擇器引擎。
  • Avalon.js： 一個迷你、易用、高性能的前端MVVM框架。
  • String.js： JavaScript字串中沒有包含的方法，例如轉義html、解碼html實體、剝離標記等。

Js外掛程式

  • Swiper.js：移動端網站的內容觸摸滑動外掛程式。
  • Glide.js： 一個無依賴關係的JavaScript ES6滑塊和carousel。
  • QRCode.js： 二維碼生成外掛程式。
  • slidePage.js： slidePage3 特別適合主流前端框架開發，無任何依賴庫，一個優化的全屏外掛程式。
  • fullPage.js： fullPage.js 是一個基於 jQuery 的外掛程式，它能夠很方便、很輕鬆的製作出全屏網站。
  • Validate.js： JavaScript表單驗證類庫。
  • tree-d3.js： tree 樹狀圖 d3.js。
  • zTree.js： 樹外掛程式。
  • jstree： jquery外掛程式，提供互動式樹。 支援HTML和JSON數據源以及AJAX載入。
  • Datatables.js：一個高度靈活的工具，可以將任何HTML表格添加進階的互動功能。
  • DatePicker.js： 時間選擇外掛程式。
  • layDate.js： layDate 日期與時間元件。
  • Date.js： 一個開放原始碼的JavaScript Date庫，用於解析，格式化和處理。
  • clipboard.js：現代化的拷貝文字外掛程式。
  • PDF.js： 一個基於 web 標準的通用 pdf 解析和渲染庫。
  • jquery-i18n： 一個輕量級的jQuery外掛程式，用於像JAVA Resource Bundles中那樣從" .properties"檔為javascript提供國際化。
  • i18next
  • TimelineJS： 時間軸外掛程式。
  • amfe-flexible： 移動端配配。
  • lazyLoad.js：Lazy Load延遲載入圖像外掛程式，直到使用者滾動到它們才顯示！
  • spin.js： Loading介面外掛程式。
  • CodeMirror.js： 文字編輯器。
  • TinyMCE.js ：文字編輯器。
  • Video.js： 一個通用的在網頁上嵌入影片播放器的 JS 庫，Video.js 自動檢測瀏覽器對 HTML5 的支援情況，如果不支援 HTML5 則自動使用 Flash 播放機。
  • SweetAlert.js： JavaScript 外掛程式，能夠完美替代 JavaScript 自帶的 alert 彈出框，並且功能強大、設計優美。
  • PhotoSwipe.js： 一個 JAvaScript 實現的相冊元件，沒有外部依賴。
  • highlight.js： 用JAvaScript編寫的語法突出顯示工具。
  • Cropper.js： 一款非常強大卻又簡單的圖片裁剪工具，它可以進行非常靈活的配置，支援手機端使用，支援包括 IE9 以上的現代瀏覽器。
  • Store.js： 跨瀏覽器存儲外掛程式。
  • Js-cookie： 一個簡單，輕巧的JAVAScript API，用於處理Cookie.
  • Mousetrap.js： 一個用於處理鍵盤快速鍵的簡單庫。
  • FlexSlider.js： 全屏回應式輪播圖外掛程式。
  • Leaflet.js： 一個開放原始碼的JavaScript庫，用於移動友好的互動式地圖。

動畫庫

  • iTyped.js： 簡單 Javascript 動畫輸入，沒有任何依賴關係。
  • Three.js： 3D顯示動畫庫。
  • Animejs：一個輕量的JavaScript 動畫庫， 擁有簡單而強大的API。 可對 CSS 屬性、 SVG、 DOM 和 JavaScript 物件進行動畫。
  • Mo.js： 一款效果非常炫酷的HTML5 SVG氣泡導航和波浪式頁面切換特效。
  • Velocity.js：一個簡單易用、高性能、功能豐富的羽量級JS動畫庫。
  • ScrollReveal.js： 一個JavaScript庫，用於在元素進入/離開視口時輕鬆對其進行動畫處理。
  • Kute.js： 一個完全成熟的原生 JavaScript 動畫引擎，具有跨瀏覽器動畫的基本功能。
  • Bounce.js：快速創建漂亮的 CSS3 動畫效果。
  • Dynamicsjs： JavaScript 庫，用於創建基於物理的動畫。
  • GreenSock.js）：適用於現代網路的專業級JAvaScript動畫。
  • Particles.js：用於創建粒子的輕量級JAVAScript庫。
  • Matter.js：Matter.js是Web的2D物理引擎。
  • Parallax.js：滾動視差效果封裝，便於快速調用實現。
  • Tween.js： 補間動畫。
  • Ramjet.js： 製作從一個元素變化為另外一個元素的動效，它能作用於DOM元素、SVG、靜態和動態的圖片。
  • Rellax.js：讓頁面滾動更有趣的動畫庫。
  • Hover.css： 一組CSS3動力懸停效果，可應用於連結，按鈕，徽標，SVG，特色圖像等。
  • Animista.css： 一個線上動畫生成器，同時也是一個動畫庫。
  • Animate.css：一個來自國外的 CSS3 動畫庫，它預設了抖動（shake）、閃爍（flash）、彈跳（bounce）、翻轉（flip）、旋轉（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多達 60 多種動畫效果。
  • Vivify.css：一個免費的CSS動畫庫。
  • Magic Animations CSS3：CSS3 動畫庫。
  • cssanimation：一堆不同動畫集合，CSS3 動畫包。
  • Angrytools： 可以做動畫生成器，同時也是一個動畫庫。

Css 預處理

  • sass： 世界上最成熟、最穩定、最強大的專業級CSS擴展語言。
  • less： 一門 CSS 預處理語言，它擴展了 CSS 語言，增加了變數、Mixin、函數等特性，使 CSS 更易維護和擴展。
  • stylus： 一個高效、動態以及豐富的 CSS 預處理器。

圖表庫

  • C3.js： C3.js 開源圖表庫
  • Chart.js：為設計和開發人員準備的簡單、靈活的 JavaScript 圖表工具。
  • Chartist.js： 一個簡單的 JAvaScript 動畫庫，你能夠自製美麗的回應式圖表，或者進行其他創作。
  • D3.js： 一個非常強大的圖形JAVAScript庫。 D3.js可以作為圖表庫的構建塊且免費。
  • Echarts： 資料可檢視表庫。
  • Flot.js： jQuery的Javascript圖表庫。
  • HighCharts.js：相容 IE6+、完美支援行動端、圖表類型豐富、方便快捷的 HTML5 互動性圖表庫。
  • koolchart.js：基於HTML5 Canvas的JAVAScript圖表庫。
  • Recharts： Recharts是一個用React和D3構建的重新定義的圖表庫。

包管理工具

  • npm： 套件管理工具。
  • yarn： 快速、可靠、安全的依賴管理工具。
  • bower

打包工具

  • gulp： 用自動化構建工具增強你的工作流程。
  • webpack： 一個現代 JavaScript 應用程式的靜態模組打包器。
  • grunt： 基於 Node.js 的項目建構工具。
  • Parcel： Web 應用打包工具，適用於經驗不同的開發者。
  • rollup： JavaScript 模組打包器，可以將小塊代碼編譯成大塊複雜的代碼。

Node

  • Node 中文網文檔
  • Express：基於 Node.js 平臺，快速、開放、極簡的 Web 開發框架。
  • koa： Koa -- 基於 Node.js 平台的下一代 web 開發框架。
  • Egg：為企業級框架和應用而生。
  • Meteor： 一個web APP開發框架。
  • Nodal： Node.js的網路伺服器，經過最佳化可快速高效地建構API服務。
  • Keystone： 以Express和MongoDB為基礎搭建的Node.js CMS和web應用程式平臺。
  • Sails：一個優秀的web後台開發框架。 它基於著名的express，添加了很多功能模組，支援REST、各種流行資料庫等。
  • Loopback： LoopBack 框架是由一組Node.js的模組構成的。
  • Pomelo：一個輕量級的伺服器框架，它最適合的應用領域是網頁遊戲、社交遊戲、移動遊戲的服務端，開發者會發現pomelo可以用如此少的代碼達到強大的擴展性和伸縮性。。
  • Totaljs： Node.js 的 MVC 框架。
  • Derby： DerbyJS 是一個 MVC 框架，幫助編寫即時，互動的應用。
  • Socket： Socket.io 是一個類庫，可以在瀏覽器與伺服器之間實現即時、雙向、基於事件的通信。 英文
  • Mojito： 一個模組化的，由原始碼控制的分割測試框架，可讓您透過Git / CI構建，啟動和分析實驗。
  • Next： 用於建構效率且可伸縮的服務端應用程式的漸進式 Node.js 框架。
  • ThinkJS： 一款面向未來開發的 Node.js 框架，整合了大量的專案最佳實踐，讓企業級開發變得更簡單、高效。
  • Mean

測試工具

  • eslint： 可組裝的 JavaScript 和 JSX 檢查工具。
  • Jest： 一個令人愉快的 JavaScript 測試框架，專注於簡潔明快。
  • mocha： 一個功能豐富的javascript測試框架，運行在node.js和瀏覽器中，使非同步測試變得簡單有趣。
  • JSHint： 用於標記用 JavaScript 編寫的程式中的可疑用法。
  • JScs.js： 驗證JavaScript代碼。

Api查詢

開發工具

常見的開發論壇

其他

  • Markdown： 一份免費且開源的 Markdown 參考手冊，詳細講解了 Markdown 這一簡單、易用的文檔格式化標記語言的用法。
  • git： 版本控制工具。
  • svn： 一個開放原始碼的版本控制系統。
  • Ionic 一個強大的 HTML5 應用程式開發框架。
  • mui： 最接近原生APP體驗的高性能前端框架。
  • leetCode： 力扣提供海量技術面試資源，説明你高效提升程式設計技能，輕鬆拿下世界IT 名企。
  • font-awesome： 字型為您提供可縮放向量圖示，它可以被定製大小、顏色、陰影以及任何可以用 CSS 的樣式。
  • Bootstrap： 簡潔、直觀、強悍的前端開發框架，讓web開發更迅速、簡單。

作者：FishStudy520
連結：segmentfault.com/a/1190
來源：segmentfault
著作權歸作者所有。 商業轉載請聯繫作者獲得授權，非商業轉載請註明出處

What do you think?

0 Points
Upvote Downvote

Browse and manage your votes from your Member Profile Page

Written by marketer

blank

101個説明你成為更好Web開發程式師的技巧
blank

如何在分散式多雲世界中取得成功