2018年最應該關注的11個vue.js元件庫

馬拉喀什發表於2017-12-23

Vue.js, React and Angular NPM 2017下半年下載情況

不同於ReactAngularVue.js是由Evan You通過人們進行專案資助來維持的一個開源的程式碼庫。你也許會說,這正是為什麼Vue.js很牛的一個重要原因,因為它鼓勵你“寫更高質量的程式碼和更好的文件內容,超出你通常的期望”。

將近 80k個Stars,並得到Adobe,gitlab等公司的歡迎和使用,Vue受歡迎的程度同樣超出預期,似乎仍然在持續增長。

Vue, React and Angular GitHub的統計 2017年12月13日

Vue的成功很大一部分原因在於它的元件。與元件一起工作意味著您可以孤立地考慮每個UI片斷,鼓勵重用性和模組化,並幫助保持UI一致性。所有Vue元件也就是Vue的例項,然後接受同樣的選擇物件(除了幾個特定的選項外),提供相同的生命週期。

Vue.js元件構建應用程式

元件也可以被共享,如果使用Bit連線工具會像Git那樣。而Yarnnpm之間能形成平滑的互動,並可以通過程式碼庫來進行分享。你能找到任何Git儲存庫中的元件,快速分享他們的變化和元件集合。從那裡,元件如需要提取並使用,那可以使用打包工具Yarn/npm然後進一步修改任何庫的原始碼。

1. Vuetify

7K以上的Starsvuetifyjs根據MDL規範提供UI佈局。V1.0 Alpha release 版本提供了超過80個可重複使用元件,這些元件都是基於語義的很容易記住,名字屬性也設計的簡單明瞭。

2. Vue Material

一個Vue元件庫,實現類似谷歌的MDL。有5KStars,它提供了適用於所有現代瀏覽器的內建動態主題和一個明確的目標即儘可能簡單的元件API。

3. Keen UI

雖然受UI規範的啟發,但Keen-UI並不是真正的MDL標準UI庫。有3Kstars,它不是一個CSS框架,不包括表格或排版樣式,但使用元件需要JavaScript。

4. Element

有超過21KStars!這個廣受歡迎的Vue 2工具包為網站提供了豐富的選擇——可定製的元件。雖然該檔案可能對中國或者採用中文頁面的來說更簡單使用者,這個庫就是一個活的生態系統,提供了一個Vue UI庫的強大選擇。

5. Buefy

buefy提供Vue.js和Bulma元件。在接近2Kstars中,它提供了即插即用的響應方式。雖然元件選擇有一定的侷限性,但會使您想嘗試一下。

6. Bootstrap-Vue

它有3kStars,Bootstrap-Vue可以使用Vue.js和Bootstrap 4生成移動優先的響應式介面。可支援vue.js 2.4 +,它帶有一個自動WAI-ARIA可達性標記。

7. AT-UI

建立專用的桌面應用程式使用者介面,提供npm + webpack + babel支援的前端開發的工作流。這個元件更適合使用英語的介面,它提供了一個適合選擇的乾淨和整齊的UI元件。

8. Fish-UI

Fish-UI是一個基於ES2015和webpack工作的Web工具包。幾乎沒有任何文件,這個庫有多大35個元件的豐富選擇,其中有一個比較乾淨的基本介面和良好的結構。

9. Quasar

4K以上的Stars,這是個流行的框架。包括幾十個vue.js元件,對Web應用程式和移動應用程式的功能提供豐富的選擇。元件是作為Web元件編寫的,因此它們可以嵌入HTML、CSS和JavaScript程式碼,您只需在頁面和佈局模板中包含HTML標記即可使用它們。

10. Muse UI

5KStars,Muse UI是vue.js 2的Material Design UI庫。雖然你可能要說只對中文是很友好的,但這些緊密的元件對於那些尋求一個vue.js Material Design UI庫的人來說,還是很不錯的。

11. Vux

10KStarsVux的靈感來自移動應用程式WeChat的weui這個廣泛流行的元件庫。使用它的話注意:文件是中文的,但也提供英文版本。每一個元件都通過文件進行了互動式的呈現,並帶有現場的“移動”模擬演示。

元件

每一個元件都可以在Vue專案awesome-vuecomponents and libraries下發現。為讓你的使用者介面的一致性,避免重複,避免增加多個庫到你的專案,你也可以通過bit來新增使用任何庫,也可以快速使用npm/Yarn安裝使用單個元件。

無論你選擇那個庫或設計自己的元件,在2018,vue.js都是你的下一個應用程式的一個強有力的架構競爭者,因為它提供一個易於提取,輕巧而靈活的框架。

匯智網(www.hubwiz.com)小智整理翻譯。

分享最新的Vue.js 2 全家桶系列教程:

1.vue.js 入門與提高: http://xc.hubwiz.com/course/592ee9b2b343f27b0ae1ba99

2.vuex 2 入門與提高: http://xc.hubwiz.com/course/597d463fff52d0da7e3e397a

3.vue-router 入門與提高: http://xc.hubwiz.com/course/5983d3aeff52d0da7e3e3d50

4.vue.js 工程化實踐: http://xc.hubwiz.com/course/598bad66c7fd1d49453979c9

相關文章