根據最近的React庫和Angular庫的清單發展情況。2018年,這裡統計有11個常用的vue.js元件庫,它們最有可能出現在你的下一個vue.js應用程式的UI中。
Vue.js, React and Angular NPM 2017下半年下載下傳情況
不同于React和Angular,Vue.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那樣。而Yarn和npm之間能形成平滑的互動,并可以通過代碼庫來進行分享。你能找到任何Git存儲庫中的元件,快速分享他們的變化群組件集合。從那裡,元件如需要提取并使用,那可以使用打包工具Yarn/npm然後進一步修改任何庫的源代碼。
1. Vuetify
有7K以上的Stars,vuetifyjs根據MDL規範提供UI布局。V1.0 Alpha release 版本提供了超過80個可重複使用元件,這些元件都是基于語義的很容易記住,名字屬性也設計的簡單明了。
2. Vue Material
一個Vue元件庫,實作類似谷歌的MDL。有5K的Stars,它提供了适用于所有現代浏覽器的内置動态主題和一個明确的目标即盡可能簡單的元件API。
3. Keen UI
雖然受UI規範的啟發,但Keen-UI并不是真正的MDL标準UI庫。有3K的stars,它不是一個CSS架構,不包括表格或排版樣式,但使用元件需要JavaScript。
4. Element
有超過21K的Stars!這個廣受歡迎的Vue 2工具包為網站提供了豐富的選擇——可定制的元件。雖然該檔案可能對中國或者采用中文頁面的來說更簡單使用者,這個庫就是一個活的生态系統,提供了一個Vue UI庫的強大選擇。
5. Buefy
buefy提供Vue.js和Bulma元件。在接近2K的stars中,它提供了即插即用的響應方式。雖然元件選擇有一定的局限性,但會使您想嘗試一下。
6. Bootstrap-Vue
它有3k個Stars,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
有5K的Stars,Muse UI是vue.js 2的Material Design UI庫。雖然你可能要說隻對中文是很友好的,但這些緊密的元件對于那些尋求一個vue.js Material Design UI庫的人來說,還是很不錯的。
11. Vux
有10K的Stars,Vux的靈感來自移動應用程式WeChat的weui這個廣泛流行的元件庫。使用它的話注意:文檔是中文的,但也提供英文版本。每一個元件都通過文檔進行了互動式的呈現,并帶有現場的“移動”模拟示範。
元件
每一個元件都可以在Vue項目awesome-vue的components and libraries下發現。為讓你的使用者界面的一緻性,避免重複,避免增加多個庫到你的項目,你也可以通過bit來添加使用任何庫,也可以快速使用npm/Yarn安裝使用單個元件。
無論你選擇那個庫或設計自己的元件,在2018,vue.js都是你的下一個應用程式的一個強有力的架構競争者,因為它提供一個易于提取,輕巧而靈活的架構。
彙智網(
www.hubwiz.com)小智整理翻譯。
分享最新的Vue.js 2 全家桶系列教程:
1.vue.js 入門與提高:
http://xc.hubwiz.com/course/592ee9b2b343f27b0ae1ba992.vuex 2 入門與提高:
http://xc.hubwiz.com/course/597d463fff52d0da7e3e397a3.vue-router 入門與提高:
http://xc.hubwiz.com/course/5983d3aeff52d0da7e3e3d504.vue.js 工程化實踐:
http://xc.hubwiz.com/course/598bad66c7fd1d49453979c9