推薦 21 個頂級的 Vue UI 庫

前些天發現了一個巨牛的人工智能學習網站,通俗易懂,風趣幽默,忍不住分享一下給大家。點擊跳轉到教程。

1、Vuetify

Star 數為 11K,提供了 80 多個 Vue.js 組件,這些組件是根據谷歌 Material Design 指南實現的。Vuetify 支持所有平臺上的瀏覽器,包括 IE11 和 Safari 9+(使用 polyfill),并提供了 8 個 vue-cli 模板。

地址:?https://github.com/vuetifyjs/vuetify

2、Quasar

Star 數超過 6K,是構建 Vue.js 響應式網站、PWA、混合移動應用和 Electron 應用的流行框架。Quasar 還支持諸如 HTML/CSS/JS 壓縮、緩存清除、搖樹優化(tree shaking)、源映射、代碼分割和延遲加載、ES6 轉碼等功能。

地址:https://github.com/quasarframework/quasar

3、Element

Star 數將近 28K,是一款面向 Web 的 Vue.js 2.0 UI 工具包。它擁有一個強大的社區和 350 個貢獻者,提供了豐富的可定制組件,以及完整的樣式指南和更多的資源。 地址:https://github.com/ElemeFE/element

4、Vue Material

Star 數差不多 6K,是一個實了谷歌 Material Design 的簡單庫。該庫還提供了一個 webpack 樣板、用于 Nuxt.js 的 SSR 模板和一個單獨的 HTML 文件(通過這個文件開始使用框架)。這里有一些入門的例子https://codesandbox.io/s/github/vuematerial/examples/tree/master/examples/quick-start。

地址:?https://github.com/vuematerial/vue-material

5、Keen-UI

Star 數將近 3.5 K,一組 Vue 組件的集合,在設計上受到了谷歌 Material Design 的啟發。Keen-UI 并不是一個 CSS 框架,它不包含網格系統、排版樣式等。相反,它關注的是基于 Javascript 的交互式組件。

地址:https://github.com/JosephusPaye/Keen-UI

6、Buefy

Star 數 3K 左右,基于 Bulma(https://bulma.io)提供了一組輕量級的 UI 組件。Vue.js 和 Bulma 是這個庫唯一的兩個內部依賴。它的大小約為 60KB(壓縮后的大小,并且包含了 Bulma)。你可以查看實時文檔網站(https://buefy.github.io/#/documentation/start)并在?Codepen 上運行代碼。

地址:?https://github.com/buefy/buefy

7、Bootstrap Vue

Star 數超過 5K,為 Vue.js 提供了 Bootstrap 4 組件和網格系統的實現,并提供了自動 WAI-ARIA 可訪問性標記。

地址:?https://github.com/bootstrap-vue/bootstrap-vue

8、Muse-UI

Star 數超過 6K,是另一個 Vue 2.0 MD 庫,提供了 40 多個 UI 組件和可定制主題。文檔主要使用中文撰寫,不過大多數組件是自解釋的,文檔只起到輔助作用。該項目在積極的開發和維護當中。 地址:https://github.com/museui/muse-ui

9、AT-UI

Star 數接近 1.5 K,一個模塊化的前端 UI 框架,用于開發基于 Vue.js 的 Web 界面,適用于桌面應用程序。它提供了 NPM+Webpack+Babel 的前端開發工作流和獨立的 CSS 樣式,值得一試。

地址:?https://github.com/at-ui/at-ui

10、Vux

Star 數超過 13K,是一個流行的社區庫,基于 WeUI 和 Vue 2.0。該庫還支持 webpack+vue-loader+vux 的工作流。它的文檔也是中文的。

地址:?https://github.com/airyland/vux

11、iView

Star 數將近 16K,提供了數十種用 Vue.js 構建的 UI 組件和小部件,并采用了干凈而優雅的設計。iView 被廣泛采用,社區也在積極維護,并提供了 CLI 工具用于以可視化的方式創建項目。這個也值得一試。

地址:?https://github.com/iview/iview

12、Uiv

Star 數“僅”550 左右,用于 Vue 2 的 Bootstrap 3 組件庫。所有組件加起來差不多 20KB,唯一的外部依賴是 Vue 和 Bootstrap CSS,支持基于 Webpack 的工作流。 地址:https://github.com/wxsms/uiv

13、Vuikit

Star 數 1K 左右,一個用于網站界面的響應式的 Vue UI 庫,設計風格干凈而統一。該庫作為由 Yarn 工作區管理的“monorepo”而構建,但圖標和主題可作為單獨的包發布。

地址:?https://github.com/vuikit/vuikit

14、Onsen UI+Vue

基于流行的 Onsen-UI 框架,封裝了核心 Web 組件并暴露了 Vue 風格的 API。Onsen UI 組件也被設計為能夠主動對 prop 做出反應。

地址:?https://onsen.io/v2/guide/vue/

15、Semantic UI+Vue

這個項目基本上是 Semantic-UI 框架與 Vue.js 的集成。該庫仍在開發當中,提供了一個類似于 Semantic-UI 的 API 以及一組可定制的主題。

地址:?https://semantic-ui-vue.github.io/

16、Fish-UI

Star 數“僅”為 500 左右,貢獻者也只有 3 個,但 fish-ui 提供了一個基于 Vue 的 Web 工具包,其中包含整潔干凈的組件。該庫支持 ES2015+Webpack 工作流。它的文檔不是很全,但它的設計不容忽視。

地址:?https://github.com/myliang/fish-ui

17、Mint UI

Star 數超過 11K,為 Vue.js 提供 UI 元素,提供了用于構建移動應用程序的 CSS 和 JS 組件。當全部導入時,壓縮后的代碼只有月 30KB(JS+CSS),當然它也支持單個組件的導入。

地址:?https://github.com/ElemeFE/mint-ui/

18、Framework7 Vue

這個集成提供了幾乎所有的 Framework7 元素和組件,并集成了 Framework7 Router,按照 Vue 的方式來渲染頁面。該庫正處于積極的開發和維護當中。 地址:https://framework7.io/vue/

19、Cube UI

Star 數超過 3K,是用于 Vue.js 移動應用程序的 UI 組件庫。所有組件都經過了單元測試,并且該庫還支持按需進行后期編譯和組件導入。這個庫仍在積極開發中。

地址:?https://github.com/didi/cube-ui

20、Vueblu

Star 數約 1.5K,是基于 Vue 2.0 和 Bulma 的 UI 組件庫,用于構建中臺和后臺辦公產品。它支持 ES2015 和 NPM+Webpack+Babel 工作流,并提供可自定義主題。

地址:?https://github.com/chenz24/vue-blu

21、Ant Design Vue

Star 數約 1.5K,用于開發具有數十個 Ant Design 實現組件的企業級后端產品,并支持基于 Webpack 調試的構建解決方案(支持 ES6)。請注意,它的開發已經停止了一段時間。

地址:?https://github.com/okoala/vue-antd

?

特別推薦

n3-components :

https://github.com/N3-components/N3-components

vuikit:

https://vuikit.js.org/

Kendu UI Vue

https://www.telerik.com/kendo-vue-ui

Office Fabric-Vue

https://github.com/aidewoode/office-ui-fabric-vue

vuestrap

http://kzima.github.io/vuestrap-base-components/#/

vueboot

http://morgul.github.io/vueboot/

framevuerk

http://framevuerk.com/

Vue WeUI

http://aidenzou.github.io/vue-weui/#!/

Vue-MDC

https://github.com/posva/vue-mdc

?

轉自:http://blog.talkingdata.com/?p=5993

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/448068.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/448068.shtml
英文地址,請注明出處:http://en.pswp.cn/news/448068.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

MSCRM日志配置

之前有很多人問我在MSCRM上日志怎么做,具體的如(登錄日志,操作日志)。個人認為操作日志確實比較難做(不過我可以給一個思路可以用觸發器或者plugin來實現,不過比較麻煩,對系統壓力也比較大&…

機動車駕駛人科目三考試項目及合格標準

機動車駕駛人科目三考試項目及合格標準 (2013年道路考試智能評判) 科目三考試綜合評判標準 一般規定:道路駕駛技能滿分為100分,成績達到90分為合格。 道路駕駛技能通用評判 不合格情形:考試時出現下列情形之一的&#…

數據結構——數組

數組 github地址 數組基礎 數組最大的有點:快速查詢。索引快數組最好應用于 “索引有語義” 的情況但并非所有有語義的索引都適用于數組(身份證號)數組也可以處理 ”索引沒有語義“ 的情況 封裝數組類 數組類該具備的功能:增…

十分鐘入門 RocketMQ

前些天發現了一個巨牛的人工智能學習網站,通俗易懂,風趣幽默,忍不住分享一下給大家。點擊跳轉到教程。 本文首先引出消息中間件通常需要解決哪些問題,在解決這些問題當中會遇到什么困難,Apache RocketMQ作為阿里開源的…

高智商孩子14個獨有的特點

每一位家長都希望自己的孩子具有高智商,但據專家分析孩子的智商一種是與生俱來的,另一種是在2歲之前還可以提高的,一起來看看怎樣才能提高孩子的智商? 智商高的孩子都具有哪些特點? 提高孩子智商的方法 1、改變兒童的飲食習慣。 提高孩…

Onvif2.6.1命名空間前綴對照

Onvif2.6.1命名空間前綴對照 tds http://www.onvif.org/ver10/device/wsdl tev http://www.onvif.org/ver10/events/wsdl tls http://www.onvif.org/ver10/display/wsdl tmd http://www.onvif.org/ver10/deviceIO/wsdl timg http://www.onvif.org/ver20/imaging/wsdl trt…

使用delegate類型設計自定義事件

在C#編程中,除了Method和Property,任何Class都可以有自己的事件(Event)。定義和使用自定義事件的步驟如下: (1)在Class之外定義一個delegate類型,用于確定事件程序的接口 &#xff0…

各種學習資源 文檔、手冊 (Docker 、springboot 、Guava、git、logback 、Linux 、MQ、vue、Axios)

前些天發現了一個巨牛的人工智能學習網站,通俗易懂,風趣幽默,忍不住分享一下給大家。點擊跳轉到教程。 1. Docker 中文手冊 :https://yeasy.gitbooks.io/docker_practice/advanced_network/bridge.html 2. RESTful java with JA…

C語言的“編譯時多態”

typeof 在 kernel 中的使用 —— C 語言的“編譯時多態” C 語言本身沒有多態的概念,函數沒有重載的概念。然而隨著 C 語言編寫的軟件逐漸龐大,越來越多地需要引入一些其他語言中的特性,來幫助更高效地進行開發,Linux kernel 是一…

看臉色知體內各積毒 有效清潔內臟妙方

觀察下五臟六腑是否中毒。 淤血、痰濕、寒氣這些不能及時排出體外,危害健康和精氣神的物質,中醫稱之為毒素,在鏡子里你也可以看出它們。識別之后,你更需要有效的內臟清潔妙方! 癥狀一:面色青兩側長痘黃褐斑愁云滿面…

UTC Time

整個地球分為二十四時區,每個時區都有自己的本地時間。在國際無線電通信場合,為了統一起見,使用一個統一的時間,稱為通用協調時(UTC, Universal Time Coordinated)。UTC與格林尼治平均時(GMT, Greenwich Mean Time)一樣&#xff0…

解決:Unknown custom element: <myData> - did you register the component correctly? For recursive compon

前些天發現了一個巨牛的人工智能學習網站&#xff0c;通俗易懂&#xff0c;風趣幽默&#xff0c;忍不住分享一下給大家。點擊跳轉到教程。 1. 引用一個組件報錯&#xff1a; Unknown custom element: <myData> - did you register the component correctly?For recursi…

無處不在的container_of

無處不在的container_of linux 內核中定義了一個非常精煉的雙向循環鏈表及它的相關操作。如下所示&#xff1a; struct list_head {struct list_head* next, * prev; };ubuntu 12.04 中這個結構定義在 /usr/src/linux-headers-3.2.0-24-generic/include/linux/types.h 中&…

程序員學習能力提升三要素

摘要&#xff1a;IT技術的發展日新月異&#xff0c;新技術層出不窮&#xff0c;具有良好的學習能力&#xff0c;能及時獲取新知識、隨時補充和豐富自己&#xff0c;已成為程序員職業發展的核心競爭力。本文中&#xff0c;作者結合多年的學習經驗總結出了提高程序員學習能力的三…

時間,數字 ,字符串之間的轉換

package com.JUtils.base;import java.sql.Timestamp; import java.text.SimpleDateFormat;/*** 轉換工具類<br>* 若待轉換值為null或者出現異常&#xff0c;則使用默認值**/ public class ConvertUtils {/*** 字符串轉換為int*** param str * 待轉換的字符串* param …

宏定義及相關用法

宏定義及相關用法 歡迎各位補充 目錄 一些成熟軟件中常用的宏定義&#xff1a;使用一些內置宏跟蹤調試&#xff1a;宏定義防止使用時錯誤&#xff1a;宏與函數 帶副作用的宏參數 特殊符號&#xff1a;’#’、’##’ 1、一般用法2、當宏參數是另一個宏的時候 __VA_ARGS__與##…

解決:Cannot read property ‘component‘ of undefined ( 即 vue-router 0.x 轉化為 2.x)

前些天發現了一個巨牛的人工智能學習網站&#xff0c;通俗易懂&#xff0c;風趣幽默&#xff0c;忍不住分享一下給大家。點擊跳轉到教程。 vue項目原本是用0.x版本的vue-router&#xff0c;但是去報出&#xff1a;Cannot read property component of undefined 這是因為版本問…

AMD Mantle再添新作,引發下代GPU架構猜想

摘要&#xff1a;今年秋天即將發布的《希德梅爾文明&#xff1a;太空》將全面支持AMD Mantle API&#xff0c;如此強大的功能背后離不開強大的CPU、GPU支持。上周AMD爆出了下一代海盜島R9 300系列&#xff0c;據網友猜測海盜島家族可能用上速度更快的HBM堆棧式內存。 小伙伴們…

不作35歲的程序員?

程序員三部曲--不作35歲的程序員?摩西2000 在中國&#xff0c;程序員不能超過35歲&#xff0c;似乎已經是不爭的事實&#xff0c;軟件開發工作就是青春飯&#xff0c;頂多靠畢業這十年的時間&#xff0c;超過這個年齡&#xff0c;要不成功躍身成為管理者&#xff0c;要不轉…

linux下使用TC模擬弱網絡環境

linux下使用TC模擬弱網絡環境 模擬延遲傳輸簡介 netem 與 tc: netem 是 Linux 2.6 及以上內核版本提供的一個網絡模擬功能模塊。該功能模塊可以用來在性能良好的局域網中,模擬出復雜的互聯網傳輸性能,諸如低帶寬、傳輸延遲、丟包等等情 況。使用 Linux 2.6 (或以上) 版本內核…