As a front-end framework that is popular with the masses, Vue has many excellent open source UI component libraries, which are sorted out here for your reference.
These sets of frameworks are mainly used in the production of background management systems and mobile terminals, which are convenient for developers to develop quickly.
1. PC-side UI library
1.1 Element Plus
Official website address: https://element-plus.org/zh-CN/
Github: https://github.com/element-plus/element-plus
Element-plus is based on Vue 3, a component library for designers and developers.
1.2 Ant-design-vue
Official website address: https://antdv.com/
Github: https://github.com/vueComponent/ant-design-vue
ant-design-vue is the Vue implementation of Ant Design, which develops and serves enterprise-level backend products.
1.3 Vuetify
Official website address: https://vuetifyjs.com/
Github: https://github.com/vuetifyjs/vuetify
Vuetify is a handcrafted Material-style Vue UI component library. No design skills required—everything you need to create stunning apps is at your fingertips. A complete set of development docking documents, easy to use.
Vuetify is the world's most popular Vue.js framework for building feature-rich, fast applications.
1.4 Vant 4.0
Official website address: https://vant-ui.github.io/vant/
Github: https://github.com/vant-ui/vant
Vant is a lightweight, reliable mobile component library that was open sourced in 2017.
At present, Vant officially provides Vue 2 version, Vue 3 version and WeChat applet version, and the community team maintains the React version and Alipay applet version.
1.5 Naive UI
Official website address: https://www.naiveui.com/
Github（11k）:https://github.com/tusen-ai/naive-ui
Quasar builds high-performance VueJS user interfaces that work out-of-the-box and support desktop and mobile browsers (including iOS Safari!)
1.5 arco.design
ByteDance enterprise-level product design system supports both React and Vue versions
Official address: https://arco.design/
ArcoDesign was upgraded based on Byte Design within ByteDance. After nearly 3 years of polishing, it was open-sourced at the "Rare Earth Developers Conference 2021" held by the Nuggets through a large amount of business precipitation and verification within Byte. Not just a UI component library, but a comprehensive enterprise-level product design system.
ArcoDesign mainly solves the problem of seamlessly connecting product design and development to improve quality and efficiency when creating mid- and back-end applications. At present, ArcoDesign mainly serves the experience design and technical realization of ByteDance's mid- and back-end products, and is mainly jointly constructed and maintained by UED design and development students.
1.6 TDesign
A set of enterprise-level design system accumulated by the Tencent business team in the service business process
Official address: https://tdesign.tencent.com/
Development documentation: https://tdesign.tencent.com/vue-next/overview
1.7 DevUI
UI components designed by Huawei based on Vue3 and DevUI
Official address: https://vue-devui.github.io/
1.8 vuestic-ui
Vue 3's free and open source UI library, the UI is very beautiful, and there is an available background management interface.
Official address: https://vuestic.dev/
Vuestic UI is a set of Vue.js-based web development component libraries developed by the Epicmax team. Recently, the Vue3 version has been updated and released. We hope to use the expertise of Vue.js to build a usable and comprehensive open source tool in the best way . Shortly after its release, Vuestic UI became one of the most popular component libraries built with Vue.
2. Mobile UI Library
2.1 Vant
Vant is a lightweight, reliable mobile component library.
Official address: https://vant-contrib.gitee.io/vant/#/zh-CN/
Github：https://github.com/youzan/vant
Youzan team’s open source Vant 3 mobile UI component library not only fully supports Vue 3 but also supports WeChat applets and Alipay applets. It can be said that the mobile UI component library king. Vant carries all the core businesses of Youzan internally and serves more than 100,000 developers externally. It is one of the mainstream mobile component libraries in the industry.
2.2 NutUI
NutUI is a JD-style Vue mobile component library that develops and serves enterprise-level products for mobile web interfaces.
Official address: https://nutui.jd.com/#/
2.3 nutui bingo
A lottery component library based on NutUI + Vue 3 produced by the JD NutUI front-end team, used for rapid development of marketing activities and lottery gameplay in small game scenarios.
Official address: https://nutui.jd.com/bingo/#/
Technical characteristics of lottery components
-
A total of 12 lucky draw components are included
-
The UI design is based on the JD APP 10.0 visual specification
-
The official website provides detailed documentation and sufficient code examples
-
Based on Vue 3.0, it also supports TypeScript and imports on demand
-
Convenient and flexible customization settings
Covers 12 common sweepstakes components
-
TurnTable Lucky Draw
-
Marquee Marquee Sweepstakes
-
SquareNine Lucky Draw
-
ScratchCard Scratch Card Sweepstakes
-
GiftBox Mysterious Gift Box
-
LottoRoll lottery machine
-
Hiteggs smashing golden eggs
-
GiftRain Red Envelope Rain
-
LuckShake
-
DollMachine Crane Machine
-
ShakeDice shake the dice
-
GuessGift you hide I guess
2.4 Varlet
Material style mobile component library with complete documentation. Recommended by You Yuxi, worthy of attention.
Official address: https://varlet.gitee.io/varlet-ui/#/zh-CN/home
2.5 uview-plus
uview-plus3.0 is a vue3 version modified based on uView2.x
Official address: https://uiadmin.net/uview-plus/
2.6 Cube UI
Didi team's open source Cube UI mobile Vue UI component library, light and handy.
Official website: https://didi.github.io/cube-ui/#/zh-CN
Github：https://github.com/didi/cube-ui
The quality of Cube UI is reliable, and it is streamlined and refined from Didi's internal component library. It has experienced more than a year of business tests, and each component has sufficient unit tests to provide guarantee for subsequent integration. The ultimate experience, with the goal of fast response, smooth animation, and close to the original, pursues the ultimate in interactive experience.
Do you know which excellent Vue3 UI frameworks, leave a message in the comment area, bring the official website address, and share the good things with everyone.