Vue.js技術棧元件庫

vue PC端元件庫

1、Element『github star 45.6K』

餓了麼團隊開發的一套為開發者、設計師和產品經理準備的基於 Vue 2.0 桌面端元件庫。

基於Vue.js的Material Design元件框架。包含手工製作的精美材料元件。不需要設計技能，也能建立令人驚歎的應用程式。

基於Vue.js的開源框架，允許Web開發人員快速建立多種型別的responsive++網站/應用，編寫程式碼一次並同時將其部署為網站、移動應用或Electron應用。

5、Ant Design Vue『github star 10.5K』

基於 vue.js 和 Ant Design 樣式的 UI元件庫，開發和服務於企業級產品。

基於 Bootstrap v4 + Vue.js 的前端 UI 框架。基於flexbox彈性佈局，用於在web上構建響應式，移動優先的專案。

基於 Vue 2.0 優雅的 Material Design UI 元件庫。

vue 移動端元件庫

1、Mint-UI『github star 15.8K』

餓了麼前端團隊開發的基於vue .js的移動端UI框架，它包含豐富的 CSS 和 JS 元件，能夠滿足日常的移動端開發需求。

有贊前端團隊基於有贊統一的規範實現的 Vue 元件庫，提供了一整套 UI 基礎元件。

滴滴團隊開發的基於 Vue.js 實現的精緻移動端元件庫。支援按需引入和後編譯，輕量靈活；擴充套件性強，可以方便地基於現有元件實現二次開發。

京東自研的輕量級移動端Vue元件庫，目前最新的版本是2.2.5，有近50多個元件。開發和服務於移動Web介面的企業級前中後臺產品。

1、Material UI『github star 58.1K』

基於 Google Material Design 設計規範的 React 元件庫，開箱即用，使用它可以快速搭建出賞心悅目的應用介面。

支付寶團隊出品的基於 Preact / React / React Native 移動端UI元件庫。

滴滴團隊基於 React 的移動端開發元件庫。 元件豐富、輕量、易用，包含 50多 個互動功能，支援多語言與自定義面板。

Onsen UI 專為移動應用程式設計的豐富UI元件應用程式框架。可以用於與當下流行框架（如 Vue.js、AngularJS 1、Angular 2+和React）更緊密地整合。

https://www.toutiao.com/i6834426578668093956/

https://www.toutiao.com/i6832455087994962435/

https://www.toutiao.com/i6836313110047883787/

❤️ 最後

現在前端也細分好幾個領域以及技術棧。按技術棧分，如果是react，有阿里巴巴的ant design mobile元件庫；如果是vue，有餓了麼的element ui，當然剛看了一下它的官網，也出了react和angular版本。如果是微信小程式，微信官方就有一個weui。其實我也只說了一些，前端更新還是很快的。我們開發h5頁面基本不用框架，基本都是自己開發一些適合自己的公共元件。不用公共元件庫的目的，一是出於檔案大小的考慮。大多數我們只用到UI庫的少部分元件，引入全部的js會多佔用使用者的下載流量，而且影響下載速度，h5對這個很看重。其二，很多ui庫並不適合我們的業務。當然，我們也自己從ant design mobile原始碼裡抽出了部分有用的元件給自己用。一句話，一切為了減少資源引入。而pc端，就基本是一套bootstrap，再配合ui設計師，調整一下基本色調，公共class。就基本可以涵蓋大部分情況了。pc相比於h5，主要是增刪改查，頁面相似度較高，基本做一套專案下來，就能積累大部分公共元件，供下一個專案使用。另外，pc端由於主要是後臺系統，對視覺效果還原度不如h5，因此很多時候產品和測試都只看重功能，很少提一些ui上的bug，除非真的是醜的無法忍受了。我想說的是，都能醜到這種程度，那一定是做後臺開發的剛改行做的前端頁面吧（此處高階黑）。