2018年九個很受歡迎的vue前端UI框架

weixin_34249678發表於2018-08-28

最近在逛各大網站,論壇,SegmentFault等程式設計問答社群,發現Vue.js異常火爆,重複性的提問和內容也很多,小編自己也趁著這個大前端的熱潮,著手學習了一段時間的Vue.js,目前用它正在做自己的公司專案。

學習的過程之中發現繼最熱的 React 元件庫和 Angular 元件庫之後,這裡有很多個流行和實用的 Vue.js 元件庫完善你的下一個用 Vue.JS 編寫 UI 介面的應用程式。Vue.js是一套構建使用者介面的 漸進式框架。與其他重量級框架不同的是,Vue 採用自底向上增量開發的設計。

5640239-9fa6fce84eea1b33.png
圖片.png

一:Element

官網地址:http://element-cn.eleme.io/#/zh-CN

介紹:element ui框架的按鈕元件,這款由餓了麼前端開源的UI框架,一經面世,就收穫大量程式設計師的芳心。在github 上更是高達29.8k的star早已說明一切。用於開發PC端的頁面還是綽綽有餘的。如果說你是用vue開發者,卻沒用過element UI,那你肯定不是合格的vue開發者。

5640239-07aa31c6a8d4357d.png
圖片.png

二:iview

官網地址:https://www.iviewui.com/

介紹:iView 是一套基於 Vue.js 的開源 UI 元件庫,主要服務於 PC 介面的中後臺產品。使用單檔案的 Vue 元件化開發模式 基於 npm + webpack + babel 開發,支援 ES2015 高質量、功能豐富 友好的 API ,自由靈活地使用空間,由TalkingData開發維護,有很多知名網際網路企業都在使用。

5640239-34f831c2dc690700.png
圖片.png

三:vuetify

官網地址:https://vuetifyjs.com/zh-Hans/

介紹:Vuetifyjs 根據材料設計規格提供 UI 佈局。 V 1.0 Alpha 版本提供了超過 80個 reusbale 元件,其中包含一個易於記憶的語義設計,它基於名稱簡單明瞭 type-as-you 的型別屬性。在GitHub 上有超過 7K 的 star。

5640239-4f12733d0d46d667.png
圖片.png

四:vue-strap

官網地址:http://yuche.github.io/vue-strap/

介紹:基於 Vue.js 的 Bootstrap 元件 該倉庫包含一系列基於 Bootstrap 標記和 CSS 的本地 Vue.js 元件。所以不需要 jQuery 和 Bootstrap 的 JavaScript 檔案,唯一需要依賴的是: Vue.js Bootstrap CSS ,VueStrap 不依賴某個非常精確的 Bootstrap 版本。如果喜歡bootstrap的小夥伴又不想換jquery的開發方式是不二的選擇。


5640239-5e88346fca5bc9de.png
圖片.png

五:cube-ui

官網地址:https://didi.github.io/cube-ui/#/zh-CN/example

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

5640239-c444f4d708351d09.png
圖片.png

六:buefy

官網地址:https://buefy.github.io/#/

介紹:Buefy 基於 Bulma 和 Vue.js 的輕量級UI元件,它提供了即裝即用的輕量級元件。雖然元件選擇有限,但是值得你去嘗試。

5640239-cfcfcbeb9c89ab03.png
圖片.png

七:vue-beauty

官網地址: https://fe-driver.github.io/vue-beauty/#/components/button

介紹:基於 ant design 的漂亮的 vue 元件庫;vue-beauty 是一套基於 vue.js 和 ant-design樣式 的PC端 UI 元件庫,旨在幫助開發者提升產品體驗和開發效率、降低維護成本。

5640239-621ae0f0c332777d.png
圖片.png

八:at-ui

官網地址: https://at-ui.github.io/at-ui/#/zh

介紹:AT-UI 是一個模組化的前端 UI 框架,開發基於Vue.js 的快速和強大的 Web 介面。專門為桌面應用程式構建,AT-UI提供了一套 npm + webpack + babel 前端開發工作流程。全英文的文件對使用者來說可能是具有有挑戰性的,但它提供了一個體面的乾淨整潔的 UI 元件。

5640239-a38a804145d73567.png
圖片.png

九:Vue-Blu

官網地址: https://chenz24.github.io/vue-blu/#/

介紹:Vue-Blu是基於VuejsBulma開發的開源UI元件庫。旨在為PC端的前端開發(特別是中後臺產品)提供一個快速且靈活的解決方案。全面、靈活且強大的ui元件,API友好。

5640239-ec178bce44f6d2a0.png
圖片.png


原文作者:祈澈姑娘
技術部落格:https://www.jianshu.com/u/05f416aefbe1
90後前端妹子,愛程式設計,愛運營,愛折騰。
堅持總結工作中遇到的技術問題,堅持記錄工作中所所思所見,歡迎大家一起探討交流。

相關文章