Introduction: Vue as a by the masses and especially big admirers like, hereby listed in Github open source VUE excellent UI component library for your reference, looking forward to developers to launch more excellent component library.
I. Introduction of relevant frameworks
——————–PC————————
Element
Web rapid prototyping tool, Element, a vue 2.0-based desktop component library for developers, designers, and product managers (from Am I Hungry);
Painted star: 11.2 k
Demo: element. The eleme. IO / # / useful – CN/com…
Docs: element. The eleme. IO / # / useful – CN
Github:github.com/ElemeFE/ele…
iView
About iView,iView is a set of open source UI component library based on vue.js, mainly serving the middle and background products of PC interface.
Features: high-quality, feature-rich, friendly API, free and flexible use of space, detailed and beautiful UI, detailed documentation, customizable themes.
Who is using: TalkingData, Alibaba, Tencent, JD.com, Didi Chuxing, Meituan, Sina, Lenovo.
Painted star: 5.6 k
demo：https://www.iviewui.com/overview
docs：https://www.iviewui.com/
github：github.com/iview/iview
VueStrap
Vuetrap is the VUE version of Bootstrap.
Vue – element – admin backend based piece (segmentfault) : https://segmentfault.com/a/1190000009275424
Painted star: 3.7 k
Demo: http://yuche.github.io/vue-strap/
Docs: http://yuche.github.io/vue-strap/
github：github.com/yuche/vue-strap
Vue Admin
Painted star:3.8 k.
The demo:admin.vuebulma.com/#/components
The docs:admin.vuebulma.com/#/
Making:Github.com/vue-bulma/v…
Keen UI
Painted star:2.5 k.
The demo:josephuspaye.github.io/Keen-UI/#
The docs:josephuspaye.github.io/Keen-UI/#
Making:Github.com/JosephusPay…
Vue MDL
Painted star:890
The demo:http://posva.net/vue-mdl/
The docs:http://posva.net/vue-mdl/
Making:Github.com/posva/vue-m…
BootstrapVue
Painted star:783
The demo:https://bootstrap-vue.github.io/
The docs:https://bootstrap-vue.github.io/docs
Making:github.com/bootstrap-vue/bootstrap-vue/
Vue-Blu
Painted star:680
The demo:https://chenz24.github.io/vue-blu/#/
The docs:https://chenz24.github.io/vue-blu/#/
Making:github.com/chenz24/vue-blu
VuiKit
Painted star:646
The demo:vuikit.js.org/#/
The docs:vuikit.js.org/#/
Making:Github.com/vuikit/vuik…
——————–Mobile————————
VUX
A makeshift vue.js mobile lonely UI component library
About VUX – https://doc.vux.li/zh-CN/
Painted star:7.4k
The demo:vux.li/demos/v2/#/
The docs:vux.li/#/
Making:Github.com/airyland/vu…
Mint UI
Mobile component library based on vue.js http://mint-ui.github.io/#! /zh-cn
Features:
Mint UI contains rich CSS and JS components for everyday mobile development. Through it, you can quickly build a unified style of the page, improve the efficiency of development
Painted star:5.4 k.
The demo:http://elemefe.github.io/mint-ui/#/
The docs:http://mint-ui.github.io/#! /zh-cn
Making:github.com/ElemeFE/mint-ui
Vonic
Vonic—https://wangdahoo.github.io/vonic/docs/#/
Painted star: 1.6 k
Demo: wangdahoo. Making. IO/vonic/docs /…
Docs: wangdahoo. Making. IO/vonic – docum…
Github:github.com/wangdahoo/v…
VUM
VUM–http://demo.getvum.com/#/
Painted star: 816
Demo:demo.getvum.com/#! /
docs：http://getvum.com/
github：github.com/vum-team/vum
Vue-Carbon
Painted star:632
The demo:https://myronliu347.github.io/vue-carbon/#!/
The docs:httpS: / / myronliu347. Making. IO/vue – carbon/book/v0.5.0/
Making:github.com/myronliu347/vue-carbon
YDUI
YDUI a focus on aesthetic, and efficient performance of mobile terminal & wechat UI- http://www.ydui.org/
Dedicated to movement; Use Flex layout; Rem to do responsive development; High-end customization.
Painted star:127
The demo:http://vue.ydui.org/
The docs:http://vue.ydui.org/docs/ # /
Making:github.com/ydcss/vue-ydui
Vuwe
Vuwe is a component library dedicated to Vue2 which is developed based on wechat WeUI.
It is completely decoupled from WeUI, and users can easily customize VUWE by customizing WeUI style files.
github：github.com/vuwe/vuwe
Painted star: 122
Demo: https://vuwe.github.io/vuwe/#/
Docs: https://vuwe.github.io/vuwe/doc.html#/
github：github.com/vuwe/vuwe
WE-VUE
Easy to use vue.js components. Address – https://wevue.org/
Easy to use; Perfect documentation; Online examples.
Simple to use: The WE-Vue components are simple to use and easy to configure. Supports multiple import modes. Developers who have some knowledge of VUE will be able to get started quickly.
Painted star:37
The demo:http://wevue.org/
Making:github.com/tianyong90/we-vue
——————–responsive layout system————————
Vue Material
Through the Vue Material and Vue 2.0 build exquisite app – http://vuematerial.materializecss.cn/#/
The Material design; Full-function application; Compatibility.
Painted star:2.7 k.
The demo:vuematerial.github.io/#/
The docs:Vuematerial. Making. IO / # / getting – s…
Making:Github.com/marcosmoura…
Muse-UI
Elegant Material Design UI component library based on Vue 2.0 –https://muse-ui.org/#/
Rich components: Muse UI has more than 40 UI components to adapt to different business environments; Customizable: Muse UI custom theme is very elegant, only a small amount of code to complete the theme style replacement; Vue 2.0 based: Muse UI is developed based on Vue 2.0, one of the fastest front-end frameworks available today. Vue 2.0 is compact, API-friendly, and can be used to develop complex single-page applications.
Painted star:2.5 k.
The demo:http://www.muse-ui.org/#/install
The docs:http: / /www.muse-ui.org/#/index
Making:Github.com/museui/muse…
Vuetify
Material Design Component Framework–https://vuetifyjs.com/zh-Hans/
Vibrant communities; Semantic Material components; Out of the box project scaffolding.
Everything you need to build an incredible user interface:
Community chat support; 80+Material Design components; Dynamic theme; Single import; Support SSR and PWA; Transition component; 8 vuE-CLI templates; Build quickly.
Painted star:2.1 k.
The demo:https://vuetifyjs.com
The docs:https://vuetifyjs.com
Making:github.com/vuetifyjs/vuetify
Radon UI
A VUE component library to help you quickly develop products, easy to use, high efficiency, let you get rid of all kinds of customization troubles. –https://luojilab.github.io/radon-ui/#! /
Features:
High-quality UI components developed based on Vue; Based on NPM+ Webpack +ES6+ PostCSS development; Data driven, easy to use.
Painted star: 669
The demo:https://luojilab.github.io/radon-ui/#! …
The docs:https://luojilab.github.io/radon-ui/#! /
Making:github.com/luojilab/radon-ui
RUBIK
About Rubik UI – https://ccforward.github.io/rubik/#/
Rubik UI is an open source UI component library based on vue.js 2.0+, which follows Material Design specifications in terms of interaction and visual Design and is suitable for PC and mobile terminals. Part of the internal system and some small applications are already in use, and the open source version is still being developed.
Painted star: 191
Demo: ccforward. Making. IO # / rubik / /
Docs: ccforward. Making. IO # / rubik / /
Github:github.com/ccforward/r…
——————–Hybrid————————
OnsenUI-Vue
OnsenUI cross-platform HTML 5 mobile application framework – https://onsen.io/v2/guide/vue/
OnsenUI is a cross-platform HTML5 mobile application framework that helps Javascript create beautiful hybrid and mobile Web applications for Android and iOS.
Painted star: 4.6 k
Demo: https://tutorial.onsen.io/? framework=vue&category=reference&module=dialog
Docs: https://onsen.io/v2/docs/guide/vue/
github：github.com/OnsenUI/OnsenUI/tree/master/bindings/vue
Quasar
Quasar–https://quasar-framework.org/
Painted star:1.8 k.
The demo:Quasar-framework.org/components/…
The docs:Quasar-framework.org/guide/index…
Making:Github.com/quasarframe…
Framework7-Vue
Perfect HTML framework for building beautiful iOS&Android apps –http://framework7.cn/
Framework7 is an open source, free framework for developing hybrid mobile applications (native and HTML hybrid) or iOS&Android style WEB apps. It can also be used as a prototyping tool to quickly create a prototype of an application.
Framework7 allows you to develop iOS7 applications using HTML, CSS, and JS. Framework7 is completely free and open source.
Framework7 is not compatible with all devices. She only focuses on providing the best experience for iOS and Google Material design.
If you want to develop iOS/Android Hybrid apps (Phonegap) or if you want to develop iOS and Google Material style WEB apps, Framework7 will be your first choice.
① Simple and easy to use; ② Perfectly compatible with iOS theme; ③ Perfect compatibility with Google Material theme; (3) the UI components; (4) Killer features — sliding back; ⑤ Custom; ⑥ Built-in cash channel; ⑦ More features — native scroll bar, independent of third-party libraries, high performance animation, XHR+Caching+History+Preloading, multiple views (split screen), concise JS API, page animation, Dom7- custom DOM library.
Painted star: 247
Demo: http://framework7.cn/
Docs: http://vue.framework7.cn/
github：github.com/nolimits4web/Framework7-Vue
Added at: 2018/09/19
Today, I saw the open source project of VUE again in front End Development. Some VUE libraries have not been sorted out, so I added them here. Please ignore the repeated parts. Reference links: my.oschina.net/u/3018050/b…).
2. Add new UI libraries and small projects
(1) Foreground UI component library
1, the Element
Portal: https://www.oschina.net/p/element-ui
Advantages: Chinese documents, UI types are relatively complete, UI design is simple and clear;
Weakness: not enough characteristic.
2, the iView
Portal: https://www.oschina.net/p/iview
Pros: Much like Element’s UI, with more additions and interchangeable features;
The bad: Still not very distinctive.
3, Vuetify
Portal: https://www.oschina.net/p/vuetify
Advantages: time selector is a clock style, more distinctive. Chinese document
Disadvantages: the category is not as good as the front of the whole.
4, Vue – material
Portal: https://www.oschina.net/p/vue-material
Advantages: date picker color matching is comfortable, progress bar style has dashed line form, step bar is more clear than innovative. Click on a form field and the text floats up.
5, Quasar
Portal: https://www.oschina.net/p/quasar-framework
Build responsive websites, PWA, hybrid mobile apps that can’t be opened, can’t comment, just projects.
6, Buefy
Portal: https://www.oschina.net/p/buefy
Advantages: time selector digital features are very large;
Disadvantages: Non-Chinese documents.
7, Vant
Portal: https://www.oschina.net/p/vant
Advantages: Mobile interface, lightweight, basically covers mobile interaction UI, similar to wechat style.
8, the At – the UI
Portal: https://github.com/AT-UI/at-ui
A new flat UI suite for desktop applications,
Advantages: the color is simple and elegant, the UI is delicate.
9, Vue – js – modal
Portal: https://github.com/euvl/vue-js-modal
UI library on modal boxes, color matching and shadows suitable for music entertainment projects.
10, Vuex – loading
Portal: https://github.com/f/vuex-loading
Some libraries waiting for progress,
Cons: not so pretty, it’s best to adjust the style manually.
11, Vue – js – grid
Portal: https://github.com/euvl/vue-js-grid
A library that can move the position of squares.
12, Dockeron
UI library on Docker
13, mint – UI
Portal: https://www.oschina.net/p/Mint-UI
Advantages: Simple style, clear effect on mobile terminal;
Disadvantages: Chinese font and spacing ratio slightly larger.
14, Keen – UI
Portal: https://www.oschina.net/p/keen-ui
Advantages: mobile terminal framework, date picker is good-looking;
Disadvantages: Non-Chinese documents.
15, VueCircleMenu
Portal: https://github.com/OYsun/VueCircleMenu
Advantages: provide a variety of components from the middle bouncing semicircle button program, the mainstream UI library to less, with it can not write their own;
Cons: Color view is a bit miserable.
16, the vue – carbon
Portal: https://www.oschina.net/p/vue-carbon
Advantages: very elegant style, although there is only one color, but the font and spacing to the very good, a look at the past is very comfortable, compared to the UI to do things will not be overwhelming;
Cons: May not be mainstream in China.
17, the vue – calendar
Portal: https://github.com/jinzhe/vue-calendar
Special Chinese characteristics, layout a little advantage crowded, but there is a lunar, praise!
18, vue – a datetime – picker
Portal: https://github.com/Haixing-Hu/vue-datetime-picker
19, vue2 – calendar
Portal: https://github.com/icai/vue2-calendar
Advantages: Support for scarcity of custom events in date pickers, support for date pickers for lunar and date events.
20, vue – datepicker
Portal: https://github.com/hilongjw/vue-datepicker
Date selection concise atmosphere, hope to have a matching time selector.
21, vue – datepicker
Portal: https://github.com/weifeiyue/vue-datepicker
Advantages: very small, no redundant decoration, do not occupy the layout.
22, vue – date – picker
Portal: https://github.com/Bubblings/vue-date-picker
VueJS date picker component
23, vue – fullcalendar
Big grid date pickers, hotel check-in and other play sites will use.
24, vue datepicker – simple
Portal: https://github.com/dai-siki/vue-datepicker-simple
The month selection layout is quite special, very few date pickers use such a positive red color scheme, based on vUE date selection.
25, vue – chartjs
Portal: https://github.com/apertureless/vue-chartjs
Vue version of visual charts, main pie charts, bar charts, radar charts, etc.
Disadvantages: style is too simple, use also need to adjust, compared with Baidu Echart or too little map class.
26, DataVisualization
Portal: https://github.com/SimonZhangITer/DataVisualization
Provides four simple graph classes, more practical.
Disadvantages: the background is too flowery, the foreground saturation is too low, need to adjust.
27, the vue – charts
Portal: https://github.com/hchstera/vue-charts
The style is nice, but there are still too few icon types.
28, the vue – chartkick
Portal: https://github.com/ankane/vue-chartkick
VueJS one line of code for beautiful diagrams.
29, vue – quill – editor
Portal: https://github.com/surmon-china/vue-quill-editor
Unlike many rich text editors several lines of function, but the typesetting is simple and clear, the main functions have, the style is better.
Rich text editor for Vue2 based on Quill
30, Vueditor
Portal: https://github.com/hifarer/Vueditor
Advantages: concise typography, WYSIWYG.
31, vue – HTML 5 – the editor
Portal: https://github.com/PeakTai/vue-html5-editor
Compact and practical, suitable for mobile office.
32, the vue – simplemde
Portal: https://github.com/F-loat/vue-simplemde
Pros: Rich text editor for highlighting code, comfortable color matching, good spacing.
VueJS Markdown editor component
33, vuwe
Portal: https://github.com/vuwe/vuwe
Advantages: Style and wechat very similar;
Disadvantages: Direct use, no instructions, poor documentation.
Based on the development of wechat WeUI dedicated to Vue2 component library.
34, cubeex
Portal: https://github.com/fangyongbao/cubeex
The upper and lower spacing is relatively large, which is not particularly high resolution of the old version of the visual experience is more friendly; Contains a complete set of mobile UI.
35, vue – region – picker
Portal: https://github.com/QingWei-Li/vue-region-picker
Advantages: no need to find their own data deployment provinces and cities;
Disadvantages: minimalist style, in addition to the old format bank financial website, there is basically no direct use of such a style, the need to adjust style;
Select provinces, cities and regions in China
36, vue – awesome – swiper
Portal: https://github.com/surmon-china/vue-awesome-swiper
A variety of display of the wheel map components
37, the vue – haven
Portal: https://github.com/staskjs/vue-slick
UI of the caroute diagram component
38, vue – material – design
Portal: https://github.com/loujiayu/vue-material-design
Form UI, simple
39, Muse – the UI
Portal: https://www.oschina.net/p/muse-ui
Pros: Very nice time, date picker! The design of the official website page is particularly lovely, and I believe other components will be improved over time.
40 and Uiv
Portal: https://github.com/wxsms/uiv
The Bootstrap3 component library for Vue2.
41, Vuikit
42, Fish – the UI
Portal: https://www.oschina.net/p/fish-ui-
White and white color UI library, clean, biased towards European and American form style;
Gray chroma, line thickness, text font selection, spacing gives people a comfortable feeling.
43, Framework7 Vue
Portal: https://framework7.io/vue/
Advantages: Currently found on Android and Apple, the only UI renderings of the different effects of the illustration UI library. From the button to the wheel map very comprehensive.
44, Cube UI
Portal: https://www.oschina.net/p/cube-ui
Very distinctive UI design, the type is more complete, the activity effect is better.
45, Vueblu
Portal: https://github.com/chenz24/vue-blu
More concise, a variety of angles to provide transition animation.
46, Ant Design Vue
Portal: https://github.com/okoala/vue-antd
Very flat UI, no shadows, no wireframes, solid color fill.
Second, background UI library
1, Vue – element – admin
Portal: https://www.oschina.net/p/vue-element-admin
Very comprehensive background UI library, designed for business applications.
2, the Vue – admin
Portal: https://github.com/vue-bulma/vue-admin
The graphic design is not that amazing, but the thickness and color scheme are very important.
3, vueAdmin
Portal: https://github.com/taylorchen709/vueAdmin
Advantages: comprehensive, suitable for China’s mainstream group design;
Faults: Not young style, very conventional backstage design.
Third, other
1, the Best resume — (
Portal: https://github.com/salomonelli/best-resume-ever
2, the vue – hackernews – 2.0
Portal: https://github.com/vuejs/vue-hackernews-2.0
Vue-router&vuex and server-side rendering.
3, Vue – devtools
Portal: https://github.com/vuejs/vue-devtools
Chrome DevTools extension for debugging vue.js applications.
4, Electron – vue
Portal:
https://github.com/SimulatedGREG/electron-vue
https://simulatedgreg.gitbooks.io/electron-vue/content/cn/
Electron & Vue.js Quick start templates, including vuE-CLI scaffolding, universal Vue plug-ins, electric-Packager/electric-Builder, unit/E2E tests, Vue-DevTools and Webpack.
5, Vue – loader
Portal: https://github.com/vuejs/vue-loader
Webpack loader for vue.js components.
6, Vuepack
Portal: https://github.com/egoist/vuepack
A trendy seed project using Vue 2,Vuex, VUE-Router and Webpack 2 (even Electron).
7, Codesandbox
Portal: https://github.com/CompuIves/codesandbox-client
An online code editor designed for Web application development.
8, Vuefire (2.0 v)
Portal: https://github.com/vuejs/vuefire
Firebase 2 & > = 3 Vue. Js 1 & 2 bindings.
9, the Vue – tetris
Portal: https://github.com/Binaryify/vue-tetris
Using Vue,Vuex,Immutable tetris.
10, Vue – recyclerview
Portal: https://www.oschina.net/p/vue-recyclerview
Use VUe-RecyclerView to master large lists.
11, Vuex persistedstate (2.0 v)
Portal: https://github.com/robinvdvleuten/vuex-persistedstate
Keep Vuex state with local storage
12, Vue – test – utils
Portal: https://github.com/vuejs/vue-test-utils
Used to test the use of Vue components.
13, the Vue – meta (1.0 v)
Portal: https://github.com/vuejs/vue-test-utils
Manages page meta information in Vue 2.0 components and supports SSR + streaming media.
14, ESLint – plugin – vue
Portal: https://github.com/vuejs/eslint-plugin-vue
The official ESLint plugin for vue.js.
15, Vue – tables – 2
Portal: https://github.com/matfish2/vue-tables-2
Vue.js 2 Grid components.
16, Vue – baidu – map
Portal: https://github.com/Dafrok/vue-baidu-map
Advantages: simple function to use;
Cons: Not pretty style.
17, the vue – amap
Portal: https://www.oschina.net/p/vue-amap
Map component based on Vue 2.x and Autonavi
18, the vue – waterfall
Portal: https://www.oschina.net/p/vue-waterfall
Vue. Js waterfall layout component.
4. Some projects
1, IFmiss/vue – music
Portal: http://www.daiwei.org/vue-music.html#/mymusic
2. Douban Project
Portal: https://github.com/jeneser/douban
Nice markdown editor