推薦21個頂級的Vue UI庫！ – TalkingData‘s Blog

推薦21個頂級的Vue UI庫！

最近，隨著“星球大戰”（指 GitHub 的 Star 數量大比拼）的爆發，Vue.js 在 GitHub 上的 Star 數超過了 React。雖然 NPM 的下載量仍然落后于 React，但 Vue.js 的受歡迎程度似乎在持續增長。

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

重磅發布預告

排名11位的iView是由TalkingData數據可視化團隊開源的UI組件庫，也是一個充滿情懷的開源項目。 在過去的一年里，iView共迭代了27個版本，還在近期發布了針對微信小程序開發的UI組件庫——《iView Weapp》。 7.28是iView的兩周年生日，iView團隊也將在這一天舉辦發布會，正式發布iView 3.0以及5款與iView相關的神秘產品。點擊文末閱讀原文，就有機會親臨發布會現場。

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

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

相關文章

后綴數組水題兩道

后綴數組水題兩道

BZOJ1031:倍長，建sa，跑一邊把sa值小于等于長度的后綴第n個字母輸出BZOJ4278:直接把串合并起來建一個sa就可以了，然后直接分組貪心 轉載于:https://www.cnblogs.com/dream-maker-yk/p/10068915.html
閱讀更多...
js獲取頁面的各種高度與寬度

js獲取頁面的各種高度與寬度

document.body.scrollTop等屬性可以獲取頁面滾動距離等&#xff0c;但是此類屬性在xhtml標準網頁或者更簡單的說是帶<!DOCTYPE ..>標簽的頁面里得到的結果是0&#xff0c; 所以一般為了兼容性都這樣寫 document.documentElement.scrollTop || document.body.scrollTop;以…
閱讀更多...
MAC終端下常用Git命令 - 某個人 - 博客園

MAC終端下常用Git命令 - 某個人 - 博客園

送給新手的簡單命令操作、遠程Git和local的同步實現流程&#xff1a; 1、把git上的代碼clone到本地 $ git clone http:xxxx(地址&#xff0c;可以http也可以ssh) 2、clone到本地以后、使用branch -a 查看遠程所有分支 $ git branch -a 3、如若你有分支&#xff1a;master…
閱讀更多...
2019河北省大學生程序設計競賽（重現賽）B 題 -Icebound and Sequence （ 等比數列求和的快速冪取模）...

2019河北省大學生程序設計競賽（重現賽）B 題 -Icebound and Sequence （ 等比數列求和的快速冪取模）...

題目鏈接&#xff1a;https://ac.nowcoder.com/acm/contest/903/B 題意&#xff1a; 給你 q,n,p,求 q1q2...qn 的和 模 p。 思路&#xff1a;一開始不會做&#xff0c;后面查了下發現有個等比數列求和的快速冪公式&#xff0c;附上鏈接https://www.cnblogs.com/yuiffy/p/380917…
閱讀更多...
centos 升級curl版本

centos 升級curl版本

1、安裝repo rpm -Uvh http://www.city-fan.org/ftp/contrib/yum-repo/rhel6/x86_64/city-fan.org-release-2-1.rhel6.noarch.rpm 2、查看該 repo 包含的 curl 版本 yum.repos.d]# yum --showduplicates list curl --disablerepo"*" --enablerepo"city*"L…
閱讀更多...
nodejs服務后臺持續運行

nodejs服務后臺持續運行

forever.jpeg 我用本地mac連接阿里云服務器&#xff0c;啟動nodejs服務&#xff0c;客戶端掉線&#xff0c;服務也會終止。如何在客戶端掉線的情況下&#xff0c;node服務正常運行&#xff1f; forever介紹 forever是一個nodejs守護進程&#xff0c;完全由命令行操控。forev…
閱讀更多...
Java工具類DateFormatUtils詳解

Java工具類DateFormatUtils詳解

日期和時間格式化實用程序和常量public static String format(Calendar calendar, String pattern) 說明&#xff1a;將日歷格式化為特定的模式&#xff1b;參數&#xff1a;calendar-格式化的日歷對象&#xff0c;非null&#xff1b;pattern-用于格式化日歷的模式,非null&…
閱讀更多...
Node.js+Koa開發微信公眾號個人筆記（一）準備工作 - ZhangCui - 博客園

Node.js+Koa開發微信公眾號個人筆記（一）準備工作 - ZhangCui - 博客園

本人也是在學習過程中&#xff0c;所以文章只作為學習筆記&#xff0c;如果能幫到你&#xff0c;那就更好啦~當然也難免會有錯誤&#xff0c;請不吝指出~ 一、準備工作 1、本人學習教程&#xff1a;慕課網Scott老師的《Node.js七天搞定微信公眾號》 &#xff0c;但是有點小貴…
閱讀更多...
bzoj4919 大根堆

bzoj4919 大根堆

考慮二分求序列LIS的過程。 g[i]表示長度為i的LIS最小以多少結尾。 對于每個數&#xff0c;二分尋找插入的位置來更新g數組。 放到樹上也是一樣&#xff0c;額外加上一個合并兒子的過程。 發現兒子與兒子直接是互不影響的&#xff0c;可以直接合并。 用啟發式合并set來維護這個…
閱讀更多...
Oracle rowid

Oracle rowid

SYS prod>select rowid from scott.emp;ROWID ------------------ AAASPXAAEAAAACVAAA AAASPXAAEAAAACVAAB AAASPXAAEAAAACVAAC AAASPXAAEAAAACVAAD AAASPXAAEAAAACVAAE ROWID的格式如下&#xff1a; 數據對象編號 文件編號 塊編號 行編號 AAASPX AAE AAAACV AAA 我們可以看…
閱讀更多...
vue項目配置eslint(附visio studio code配置)

vue項目配置eslint(附visio studio code配置)

eslint基礎環境搭建 全局安裝eslint&#xff1a;npm install eslint -g 項目eslint初始化&#xff1a;eslint --init&#xff0c;按團隊或自己的編程風格回答三道題。 ? How would you like to configure ESLint? Use a popular style guide ? Which style guide do you w…
閱讀更多...
從數據庫中取出數據表，導入并生成excel

從數據庫中取出數據表，導入并生成excel

RequestMapping("/numericalStatement1")public void createExcel(HttpServletResponse resp) throws Exception{try {String path "G:/test.xlsx";// 創建新的Excel 工作簿XSSFWorkbook workbook new XSSFWorkbook();// 在Excel工作簿中建一工作表&…
閱讀更多...
【vue-router①】router-link跳轉頁面傳遞參數 - 進擊的前端之路（偶爾爬坑java小路） - SegmentFault 思否

【vue-router①】router-link跳轉頁面傳遞參數 - 進擊的前端之路（偶爾爬坑java小路） - SegmentFault 思否

在vue項目中&#xff0c;往往會遇到這樣的情況&#xff0c;就是要實現在一個循環列表中&#xff0c;點擊其中一條跳轉到下個頁面&#xff0c;然后將這一條的相關數據帶到下個頁面中顯示&#xff0c;這是個循環列表&#xff0c;無論點哪一條都是跳到相同的頁面&#xff0c;只是填…
閱讀更多...
RHEL7 USB installation problem and solving

RHEL7 USB installation problem and solving

版權聲明&#xff1a;本文為博主原創文章。未經博主同意不得轉載。 https://blog.csdn.net/scruffybear/article/details/37063701 Encountered quite a few problems while install the RHEL7, with the Windows system already installed. Problem 1:/dev/root does not exis…
閱讀更多...
Vue表單類的父子組件數據傳遞示例_vue.js_腳本之家

Vue表單類的父子組件數據傳遞示例_vue.js_腳本之家

使用Vue.js進行項目開發&#xff0c;那必然會使用基于組件的開發方式&#xff0c;這種方式的確給開發和維護帶來的一定的便利性&#xff0c;但如果涉及到組件之間的數據與狀態傳遞交互&#xff0c;就是一件麻煩事了&#xff0c;特別是面對有一大堆表單的頁面。 在這里記錄一下…
閱讀更多...
Jmeter-【JSON Extractor】-響應結果中三級key取值

Jmeter-【JSON Extractor】-響應結果中三級key取值

一、請求返回樣式 二、取第三個option 三、查看結果 轉載于:https://www.cnblogs.com/Nancy-Lee/p/10938758.html
閱讀更多...
Day5:python之函數（3）

Day5:python之函數（3）

一、函數默認值參數 內置函數&#xff1a; input&#xff08;&#xff09;、print&#xff08;&#xff09;、int&#xff08;&#xff09; 常用模塊&#xff1a; 1、列表生成式 s [1,2,3,4,5,6,7,8] for i in s:print(i1) res [ i1 for i in s] res [str(i) for i in s]prin…
閱讀更多...
vue路由傳參的三種基本方式 - 流年的櫻花逝 - SegmentFault 思否

vue路由傳參的三種基本方式 - 流年的櫻花逝 - SegmentFault 思否

現有如下場景&#xff0c;點擊父組件的li元素跳轉到子組件中&#xff0c;并攜帶參數&#xff0c;便于子組件獲取數據。 父組件中&#xff1a; <li v-for"article in articles" click"getDescribe(article.id)"> methods&#xff1a; 方案一&#…
閱讀更多...
Rust從入門到放棄（1）—— hello，world

Rust從入門到放棄（1）—— hello，world

安裝及環境配置 特點&#xff1a;安全&#xff0c;性能&#xff0c;并發rust源配置RLS安裝cargo rust管理工具&#xff0c;該工具可以愉快方便的管理rust工程 #!/bin/bash mkdir learn cd learn cargo init ## 該命令會在當前目錄下初始化一個## 目錄下會出現一個Cargo.toml文…
閱讀更多...
牛客33-tokitsukaze and Number Game(數論)

牛客33-tokitsukaze and Number Game(數論)

題目描述 tokitsukaze又在玩3ds上的小游戲了&#xff0c;現在她遇到了難關。 tokitsukaze得到了一個整數x&#xff0c;并被要求使用x的每一位上的數字重新排列&#xff0c;組成一個能被8整除的數&#xff0c;并且這個數盡可能大。 聰明的你們請幫幫可愛的tokitsukaze&#xff0…
閱讀更多...
最新文章

Copyright @ 2022~2023