16款優秀的Vue UI元件庫推薦

2021-10-08 23:20:37 字數 3125 閱讀 6743

vue 是乙個輕巧、高效能、可元件化的mvvm庫,api簡潔明瞭,上手快。從vue推出以來,得到眾多web開發者的認可。

在公司的web前端專案開發中,多個專案採用基於vue的ui元件框架開發,並投入正式使用。

開發團隊在使用vue.js框架和ui元件庫以後,開發效率大大提高,自己寫的**也少了,很多介面效果元件已經封裝好了。

在選擇vue ui元件庫的過程中,通過github上根據star數量、文件豐富程度、更新的頻率以及維護等因素,也收集整理了一些優秀的vue ui元件庫。

ps:國內的ui元件大部分都只有一部分的,常用的頭部導航,底部導航,listview,grid**很多都是沒有的。

後面才發現,基於vue的quasar framework 介紹 這個框架ui元件很全面,準備下次使用這個框架了

基於vue的quasar framework 中文網

quasarframework/quasar: quasar framework

當使用quasar時,你不需要像hammerjs,momentjs或bootstrap這樣的額外重型庫。它擁有這些功能,而且體積很小!

**********====

3、element ui元件庫

element,一套為開發者、設計師和產品經理準備的基於 vue 2.0 的桌面端元件庫。element是餓了麼前端開源維護的vue ui元件庫,更新頻率還是很高的,基本一周到半個月都會發布乙個新版本。元件齊全,基本涵蓋後台所需的所有元件,文件講解詳細,例子也很豐富。沒有實際使用過,網上的element教程和文章比較多。element應該是乙個質量比較高的vue ui元件庫。

element官網:

5、bootstrap-vue ui元件庫

bootstrap-vue提供了基於vue2的bootstrap v4元件和網格系統的實現,完成了廣泛和自動化的wai ara可訪問性標記。bootstrap 4是最新發布的版本,與 bootstrap3 相比擁有了更多的具體的類以及把一些有關的部分變成了相關的元件。同時 bootstrap.min.css 的體積減少了40%以上。bootstrap4 放棄了對 ie8 以及 ios 6 的支援,現在僅僅支援 ie9 以上 以及 ios 7 以上版本的瀏覽器。想當初剛流行響應式**的時候,bootstrap是世界上最受歡迎的建立移動優先**的框架,bootstrap可以說風靡全球。就算放在現在很多企業**都是採用bootstrap做的響應式。bootstrap-vue可以讓你在vue中也實現bootstrap的效果。

bootstrap-vue官網:

6、ant design vue ui元件庫

ant design vue是 ant design 3.x 的 vue 實現,開發和服務於企業級後台產品。在github上可以找到幾個ant design的vue元件。不過相比較而言,ant design vue更勝一籌。ant design vue共享ant design of react設計工具體系,實現了所有ant design of react的元件,支援現代瀏覽器和 ie9 及以上(需要 polyfills)。可以讓熟悉ant design的在使用vue時,很容易的上手。

ant design vue官網:

7、at-ui ui元件庫

at-ui 是一款基於 vue.js 2.0 的前端 ui 元件庫,主要用於快速開發 pc **中後台產品,支援現代瀏覽器和 ie9 及以上。at-ui 更加精簡,實現了後台常用的元件。

at_ui官網:

9、cube-ui ui元件庫

cube-ui 是基於 vue.js 實現的精緻移動端元件庫。由滴滴內部元件庫精簡提煉而來,經歷了業務一年多的考驗,並且每個元件都有充分單元測試,為後續整合提供保障。在互動體驗方面追求極致。遵循統一的設計互動標準,高度還原設計效果;介面標準化,統一規範使用方式,開發更加簡單高效。支援按需引入和後編譯,輕量靈活;擴充套件性強,可以方便地基於現有元件實現二次開發。

cube-ui官網:

10、muse-ui ui元件庫

muse-ui基於 vue 2.0 優雅的 material design ui 元件庫。muse ui 擁有40多個ui 元件,用於適應不同業務環境。muse ui 僅需少量**即可完成主題樣式替換。muse ui 可用於開發的複雜單頁應用

muse-ui官網:

11、n3-components ui元件庫

n3元件庫是基於vue.js構建的,讓前端工程師和全棧工程師能快速構建頁面和應用。n3-components超過60個元件 元件列表、自定義樣式、支援多種模化正規化(umd)、使用es6進行開發。

n3官網:

12、mand mobile

mand mobile是面向金融場景的vue移動端ui元件庫,豐富、靈活、實用,快速搭建優質的金融類產品,讓複雜的金融場景變簡單。mand mobile含有豐富的元件30+的基礎元件,覆蓋金融場景,極高的易用性元件均有詳細說明文件、案例演示,汲取最前沿技術,元件化輕量化實現,兼顧穩定和品質,努力實現金融場景的全覆蓋。

mand mobile官網:

之前的位址打不開了

15、semantic-ui-vue ui元件庫

semantic-ui-vue是基於 vue.js對semantic-ui 框架的實現。

semantic作為一款開發框架,幫助開發者使用對人類友好的html語言構建優雅的響應式布局。semantic-ui-vue提供了乙個類似於 semantic-ui 的 api 以及一組可定製的主題。

semantic-ui-vue官網:

在選擇框架的時候一定要根據實際web開發情況和團隊的熟悉程度來選擇。乙個好的ui元件庫對乙個web專案來說很重要

16.vue.js material component framework — vuetify.js

vuetify完全根據material design規範開發。每個元件都是手工製作的,為您的下乙個偉大的應用程式帶來最好的ui工具。開發並沒有停留在google規範中的核心元件上。通過社群成員和贊助商的支援,更多的元件將被設計並提供給大家享受。

這個主要是國外比較流行的vue ui元件,各種功能都有,有中文翻譯的,但有些還是英文的,翻譯得不是很好

ps:國內的ui元件大部分都只有一部分的,常用的頭部導航,底部導航,listview,grid**很多都是沒有的。

16款優秀的Vue UI元件庫推薦

vue 是乙個輕巧 高效能 可元件化的mvvm庫,api簡潔明瞭,上手快。從vue推出以來,得到眾多web開發者的認可。在公司的web前端專案開發中,多個專案採用基於vue的ui元件框架開發,並投入正式使用。開發團隊在使用vue.js框架和ui元件庫以後,開發效率大大提高,自己寫的 也少了,很多介面...

16款優秀的Vue UI元件庫推薦

16款優秀的vue ui元件庫推薦 vue 是乙個輕巧 高效能 可元件化的mvvm庫,api簡潔明瞭,上手快。從vue推出以來,得到眾多web開發者的認可。在公司的web前端專案開發中,多個專案採用基於vue的ui元件框架開發,並投入正式使用。開發團隊在使用vue.js框架和ui元件庫以後,開發效率...

17款優秀的Vue UI元件庫彙總

vue 是乙個輕巧 高效能 可元件化的mvvm庫,api簡潔明瞭,上手快。從vue推出以來,得到眾多web開發者的認可。在公司的web前端專案開發中,多個專案採用基於vue的ui元件框架開發,並投入正式使用。開發團隊在使用vue.js框架和ui元件庫以後,開發效率大大提高,自己寫的 也少了,很多介面...