超全的 Vue 開源項目合集，簽收一下

超全的 Vue 開源項目合集，簽收一下

xiaoge2016 前端開發 1周前

做者：xiaoge2016

連接：

https://my.oschina.net/u/3018050/blog/2049912

 

寫在前面

 

包括一些ui庫和比較完整的小項目。ui庫會對主要的單選框，多選框，級聯選擇器，滑塊，日期/時間選擇器，進度條，分頁，彈框，通知，導航菜單，步驟條等截圖比較

 

評價純屬我的主觀感覺，有誇張成分，只是一種表達，若有不喜請無視之。歡迎指正不足和提供更多更好的vue庫，項目，方便參考和學習使用。

 

 

1、前臺 UI 組件庫

1.Element

 

傳送門：https://www.oschina.net/p/element-ui

 

優勢：中文文檔，ui種類比較全，ui設計簡潔清晰

 

缺點：不夠有特色

 

 

 

2.iView

 

傳送門：https://www.oschina.net/p/iview

 

優勢：和element的UI很類似，有一些多的補充，能夠相互替換

 

缺點：仍然沒有什麼特點

 

 

 

3.Vuetify

 

傳送門：https://www.oschina.net/p/vuetify

 

優勢：時間選擇器是時鐘樣式，比較有特點。中文文檔

 

缺點：種類不如前面全

 

地址：https://vuetifyjs.com/zh-Hans/

 

4.Vue-material

 

傳送門：https://www.oschina.net/p/vue-material

 

優勢：日期選擇器配色溫馨，進度條樣式有虛線形式，步驟條更清晰相比有創新。表單字段點擊後文字會上浮

 

缺點：目前種類還比較少，遺憾沒有時間選擇器。非中文文檔

 

 

5.Quasar

 

傳送門：https://www.oschina.net/p/quasar-framework

 

構建響應式網站，PWA，混合移動應用程序

 

打不開，應該是被牆了，沒法評論，只有項目

 

6.Buefy

 

傳送門：https://www.oschina.net/p/buefy

 

優勢：時間選擇器數字很大有特色

 

缺點：非中文文檔

 

 

7.Vant

 

傳送門：https://www.oschina.net/p/vant

 

優勢：移動端界面，輕量化，基本涵蓋移動端交互的ui，和微信樣式很像

 

 

8.At-ui

 

傳送門：https://github.com/AT-UI/at-ui

 

一款全新的平面UI套件，專門用於桌面應用程序

 

優勢：顏色比較素雅，UI比較秀氣

 

 

9.Vue-js-modal

 

傳送門：https://github.com/euvl/vue-js-modal

 

關於模態框的ui庫，配色和陰影上適合音樂娛樂類項目

 

 

10.Vuex-loading

 

傳送門：https://github.com/f/vuex-loading

 

等待相關進度的一些庫

 

缺點：並非那麼好看，使用的話，最好手動調調整一下樣式

 

 

11.Vue-js-grid

 

傳送門：https://github.com/euvl/vue-js-grid

 

可移動方格子位置的庫

 

 

12.Dockeron

docker上的ui庫，使用後再回補

 

13.mint-ui

 

傳送門：https://www.oschina.net/p/Mint-UI

 

優勢：風格簡潔，文檔中移動端看的效果清晰

 

缺點：中文字體和間距比例上稍稍偏大

 

 

14.Keen-UI 

 

傳送門：https://www.oschina.net/p/keen-ui

 

優勢：移動端框架，日期選擇器比較好看。

缺點：非中文文檔

 

 

15.VueCircleMenu

 

傳送門：https://github.com/OYsun/VueCircleMenu

 

優勢：提供各類從中間蹦躂出半圓形按鈕的組件方案，主流ui庫給的比較少，有了它能夠不用本身寫了

 

缺點：配色視圖有點慘

 

 

16.vue-carbon 

 

傳送門：https://www.oschina.net/p/vue-carbon

 

有點：很淡雅的風格，雖然顏色只有一種，可是字體和間距給的很好，一眼過去很舒服，ui相比要作的事情不會喧賓奪主。

 

缺點：在中國可能不是主流（國人喜歡花花綠綠，字體大大的）

 

 

17.vue-calendar 

 

傳送門：https://github.com/jinzhe/vue-calendar

 

特別中國特點，排版稍稍有點擁擠，可是有農曆，好評！

 

 

18.vue-datetime-picker

 

傳送門：https://github.com/Haixing-Hu/vue-datetime-picker

 

 

19.vue2-calendar 

 

傳送門：https://github.com/icai/vue2-calendar

 

優勢：日期選擇器中支持自定義事件的稀缺

 

★181 - 支持lunar和日期事件的日期選擇器

 

 

20.vue-datepicker

 

傳送門：https://github.com/hilongjw/vue-datepicker

 

日期選擇器簡潔大氣，但願能夠有匹配的時間選擇器

 

 

21.vue-datepicker 

 

傳送門：https://github.com/weifeiyue/vue-datepicker

 

優勢：很小巧，沒有多餘的裝飾，不佔版面

 

 

22.vue-date-picker 

 

傳送門：https://github.com/Bubblings/vue-date-picker

 

★59 - VueJS日期選擇器組件

 

 

23.vue-fullcalendar 

大格子化日期選擇器，酒店入住等遊玩類網站會用到

 

24.vue-datepicker-simple

 

傳送門：https://github.com/dai-siki/vue-datepicker-simple

 

月份選擇排版蠻特別，極少數用這麼正紅配色的日期選擇器

 

 ★20 - 基於vue的日期選擇

 

 

25.vue-chartjs 

 

傳送門：https://github.com/apertureless/vue-chartjs

 

可視化圖表的vue版本，主要餅形圖，條形圖，雷達圖等都有

 

缺點：樣式太簡，使用還需調整，相比百度的Echart仍是少太多圖類

 

 

26.DataVisualization 

 

傳送門：https://github.com/SimonZhangITer/DataVisualization

 

提供四個最簡單的圖類，比較實用

 

缺點：配色上背景太花，前景色飽和度過低，須要調整

 

★149 - 數據可視化

 

 

27.vue-charts 

 

傳送門：https://github.com/hchstera/vue-charts

 

樣式比較好看，但目前圖標類型仍是太少

 

★101 - 輕鬆渲染一個圖表

 

 

28.vue-chartkick 

 

傳送門：https://github.com/ankane/vue-chartkick

 

★22 - VueJS一行代碼實現優美圖表

 

 

 

29.vue-quill-editor 

 

傳送門：https://github.com/surmon-china/vue-quill-editor

 

不似不少富文本編輯器好幾行的功能，可是排版簡潔清晰，主要功能都有，樣式比較好看

 

★149 - 基於Quill適用於Vue2的富文本編輯器

 

 

 

30.Vueditor 

 

傳送門：https://github.com/hifarer/Vueditor

 

優勢：排版簡潔，所見所得

 

★138 - 所見即所得的編輯器

 

 

31.vue-html5-editor 

 

傳送門：https://github.com/PeakTai/vue-html5-editor

 

小巧實用，可適合移動辦公

 

★132 - html5所見即所得編輯器

 

 

32.vue-simplemde 

 

傳送門：https://github.com/F-loat/vue-simplemde

 

優勢：高亮代碼的富文本編輯器，配色溫馨，間距好

 

★35 - VueJS的Markdown編輯器組件

 

 

33.vuwe 

 

傳送門：https://github.com/vuwe/vuwe

 

優勢：樣式上和微信很像

 

缺點：直接使用，沒有說明，文檔很差用

 

★107 - 基於微信WeUI所開發的專用於Vue2的組件庫

 

 

34.cubeex 

 

傳送門：https://github.com/fangyongbao/cubeex

 

上下間距比較大，對不是特別高分辨率的舊版本視覺感覺比較友好

 

★33 - 包含一套完整的移動UI

 

 

35.vue-region-picker 

 

傳送門：https://github.com/QingWei-Li/vue-region-picker

 

優勢：不用本身再找數據調配省市區

 

缺點：樣式極簡，除了老闆式銀行金融類網站外，基本沒有直接這麼樣式使用的，須要調樣式

 

★89 - 選擇中國的省份市和地區

 

 

36.vue-awesome-swiper

 

傳送門：https://github.com/surmon-china/vue-awesome-swiper

 

多種顯示的輪播圖組件

 

 

37.vue-slick

 

傳送門：https://github.com/staskjs/vue-slick

 

輪播圖組建ui比較太別

 

 

38.vue-material-design 

 

傳送門：https://github.com/loujiayu/vue-material-design

 

表單類ui，簡潔

 

 

39. Muse-UI

 

傳送門：https://www.oschina.net/p/muse-ui

 

優勢：很是好看的時間、日期選擇器！官網頁面特別有愛的設計，相信其餘組件隨着時間也會不斷完善

 

 

40. Uiv

 

傳送門：https://github.com/wxsms/uiv

 

用於 Vue 2 的 Bootstrap 3 組件庫。

 

 

41.Vuikit

 

 

42.Fish-UI

 

傳送門：https://www.oschina.net/p/fish-ui-

 

灰白配色的ui庫，乾淨利落，偏向歐美表單風格

 

灰色的色度，線條粗細，文字字體選擇，間距給人的感受真的像會呼吸的魚在水中同樣自在

 

 

42.Framework7 Vue

 

傳送門：https://framework7.io/vue/

 

優勢：目前發現的惟一對安卓和蘋果上，ui的不一樣效果作出效果圖說明的UI庫。從按鈕到輪播圖很是全面

 

特色：那個豔紅的官網真的是驚到個人視覺了

 

 

43.Cube UI

 

傳送門：https://www.oschina.net/p/cube-ui

 

頗有特點的ui設計，類型比較全。活動效果比較好

 

 

44.Vueblu

 

傳送門：https://github.com/chenz24/vue-blu

 

比較簡潔，各類角度的提供了過分動畫

 

 

45.Ant Design Vue

 

傳送門：https://github.com/okoala/vue-antd

 

很是扁平化的ui，沒有陰影，沒有線框，純色填充

 

 

 

2、後臺 UI 庫

 

1.Vue-element-admin

 

傳送門：https://www.oschina.net/p/vue-element-admin

 

很是全面的後臺UI庫，設計很是適合商業應用

 

 

2.Vue-admin

 

傳送門：https://github.com/vue-bulma/vue-admin

 

圖表圖形的設計雖然說不是那麼驚豔，可是粗細和配色很是會突出重點

 

 

3.vueAdmin

 

傳送門：https://github.com/taylorchen709/vueAdmin

 

優勢：全面，適合中國的主流羣體設計

 

缺點：不對年輕人風格，很是常規的後臺設計

 

 

 

3、其餘

 

1.Best-resume-ever

 

傳送門：https://github.com/salomonelli/best-resume-ever

 

 

2.vue-hackernews-2.0

 

傳送門：https://github.com/vuejs/vue-hackernews-2.0

 

vue-router＆vuex和服務器端渲染 [Github star：6687]。

 

3.Vue-devtools (v 4.0)

 

傳送門：https://github.com/vuejs/vue-devtools

 

用於調試Vue.js應用程序的Chrome devtools擴展程序 [Github star：6292]。

 

4.Electron-vue

 

傳送門：

https://github.com/SimulatedGREG/electron-vue

https://simulatedgreg.gitbooks.io/electron-vue/content/cn/

 

Electron＆Vue.js快速啓動樣板，包括vue-cli腳手架，通用Vue插件， electron-packager/electron-builder，單元/e2e測試，vue-devtools和webpack

 

 

5.Vue-loader (v 13)

 

傳送門：https://github.com/vuejs/vue-loader

 

Vue.js組件的Webpack加載程序(loader) [Github star：2588]。

 

6.Vuepack (v 3.0)

 

傳送門：https://github.com/egoist/vuepack

 

一個使用Vue 2，Vuex，Vue-router和Webpack 2（甚至是Electron）的新潮種子項目。 [Github star：2077]。

 

7.Codesandbox

 

傳送門：https://github.com/CompuIves/codesandbox-client

 

專爲Web應用程序開發而設計的在線代碼編輯器 [Github star：1552]。

 

 

8.Vuefire (v 2.0)

 

傳送門：https://github.com/vuejs/vuefire

 

Firebase 2＆> = 3的Vue.js 1＆2綁定 [Github star：1228]。

 

9.Vue-tetris

 

傳送門：https://github.com/Binaryify/vue-tetris

 

使用Vue，Vuex，Immutable作俄羅斯方塊 [Github star：1152]。

 

10.Vue-recyclerview

 

傳送門：https://www.oschina.net/p/vue-recyclerview

 

使用vue-recyclerview掌握大型列表 [Github star：1021]。

 

11.Vuex-persistedstate (v 2.0)

 

傳送門：https://github.com/robinvdvleuten/vuex-persistedstate

 

用本地存儲保持Vuex狀態

 

12.Vue-test-utils

 

傳送門：https://github.com/vuejs/vue-test-utils

 

用於測試Vue組件的實用程序 [Github star：977]。

 

13.Vue-meta (v 1.0)

 

傳送門：https://github.com/vuejs/vue-test-utils

 

管理Vue 2.0組件中的頁面元信息，支持SSR +流媒體。

 

 

14.ESLint-plugin-vue

 

傳送門：https://github.com/vuejs/eslint-plugin-vue

 

官方ESLint的Vue.js插件 [Github star：864]。

 

15.Vue-tables-2

 

傳送門：https://github.com/matfish2/vue-tables-2

 

Vue.js 2 網格組件 [Github star：540]。

 

16.Vue-baidu-map

 

傳送門：https://github.com/Dafrok/vue-baidu-map

 

優勢：功能簡單實用

 

缺點：樣式很差看

 

 

17.vue-amap

 

傳送門：https://www.oschina.net/p/vue-amap

 

 

18.vue-waterfall 

 

傳送門：https://www.oschina.net/p/vue-waterfall

 

★605 - Vue.js的瀑布佈局組件

 

 

4、一些項目

 

1.IFmiss / vue-music

 

傳送門：http://www.daiwei.org/vue-music.html#/mymusic

 

 

2.仿豆瓣項目

 

傳送門：https://github.com/jeneser/douban

 

 

3.markcook

 

傳送門：https://github.com/jrainlau/markcook

 

 ★318 - 好看的markdown編輯器

 

 

---

●編號792，輸入編號直達本文

●輸入m獲取文章目錄

推薦↓↓↓

Web開發

更多推薦《18個技術類微信公衆號》

涵蓋：程序人生、算法與數據結構、黑客技術與網絡安全、大數據技術、前端開發、Java、Python、Web開發、安卓開發、iOS開發、C/C++、.NET、Linux、數據庫、運維等。

閱讀原文

 

微信掃一掃關注該公衆號