Vue is a lightweight, high-performance, and componentizable MVVM library, with a concise and clear API, and quick to use. Since Vue was launched, it has been recognized by many web developers. In the development of the company's Web front-end projects, several projects were developed using the Vue-based UI component framework and put into official use. After the development team uses the Vue.js framework and the UI component library, the development efficiency is greatly improved, and the code written by themselves is less, and many interface effect components have been packaged. In the process of selecting the Vue
UI component library, some excellent Vue UI component libraries were also collected and sorted out on GitHub based on factors such as the number of stars, document richness, update frequency, and maintenance.
1. iView UI component library
iView is a set of open source UI component library based on Vue.js, which mainly serves the middle and background products of PC interface. The components of iView are relatively complete, the update is also very fast, and the documentation is very detailed. There is a relatively reliable Vue UI component framework maintained by the company team. The iView ecology is also doing very well, and an iView Admin has been open sourced, which is very convenient for the background. According to the official website, iView has been used in the products of TalkingData, Alibaba, Baidu, Tencent, Toutiao, JD.com, Didi Chuxing, Meituan, Sina, Lenovo and other large companies.
iView official website: https://www.iviewui.com/.
2. Vux UI component library
Vux is a mobile UI component library developed based on WeUI and Vue2.x, mainly serving WeChat pages. The positioning of Vux has been very clear, one is: the Vue mobile terminal UI component library, and the other is: the basic style library of WeUI. The components of Vux cover all the content of WeUI, and also extend some commonly used components. For example: Sticky, timeline, v-chart, XCircle. Vux is maintained personally. But the star on GitHub is still very high, reaching 13k. It is still very fast to see that the issue is closed on GitHub. The basic component usage and effects of the Vux document are explained in place. Many Vux use cases are also shown on the vux official website. In the development of WeChat pages, there are basically not too many bugs, and the development is relatively smooth.
Vux official website: https://vux.li/.
3. Element UI component library
Element, a Vue 2.0-based desktop component library for developers, designers and product managers. Element is the Vue UI component library maintained by Ele.me’s front-end open source. The update frequency is still very high, and a new version will be released basically every week to half a month. The components are complete, basically covering all the components required in the background, the documentation explains in detail, and the examples are also rich. I have not actually used it, and there are many Element tutorials and articles on the Internet. Element should be a relatively high-quality Vue UI component library.
Element official website: http://element.eleme.io/#/zh-CN.
4. Mint UI component library
Mint UI is based on the Vue.js mobile component library, which also comes from the front-end project of Ele.me. Mint UI is truly on-demand component loading. Only declared components and their style files can be loaded. Mint UI uses CSS3 to handle various dynamic effects, avoiding unnecessary redrawing and rearranging by the browser, so that users can obtain a smooth and smooth experience. Many video tutorials on the Internet are based on Mint UI. It is still very convenient to develop mobile web projects, and the documents are also very brief and clear. Mint UI components on many pages have already been packaged, and you can basically write them according to the examples, and you can implement them with simple adjustments. However, the last code submission on GitHub was on January 16, 2018, and half a year has passed so far. I don't know if the project is relatively stable and has not been updated, or the project may be abandoned. We will continue to pay attention to the development of Mint UI.
Mint UI official website: http://mint-ui.github.io/.
5. Bootstrap-Vue UI component library
Bootstrap-VUE provides the implementation of vue2-based Bootstrap V4 components and grid system, and completes extensive and automated WAI ARA accessibility markup. uiv is a Bootstrap 3 implementation based on Vue2. Bootstrap 4 is the latest release, which has more specific classes than Bootstrap 3 and turns some related parts into related components. At the same time, the volume of Bootstrap.min.css has been reduced by more than 40%. Bootstrap4 gave up support for IE8 and iOS 6, and now only supports IE9 and above and iOS 7 and above browsers. When responsive websites first became popular, Bootstrap was the most popular framework for building mobile-first websites in the world, and Bootstrap can be said to be popular all over the world. Even now, many corporate websites are responsive using Bootstrap. Bootstrap-Vue allows you to achieve the effect of Bootstrap in Vue.
Bootstrap-Vue official website: https://bootstrap-vue.js.org/
uiv official website: https://uiv.wxsm.space/.
6. Ant Design Vue UI component library
Ant Design Vue is the Vue implementation of Ant Design 3.X, developing and serving enterprise-level background products. Several Ant Design Vue components can be found on GitHub. But in comparison, Ant Design Vue is even better. Ant Design Vue shares the Ant Design of React design tool system, implements all Ant Design of React components, supports modern browsers and IE9 and above (requires polyfills). It can make it easy for those who are familiar with Ant Design to get started when using Vue.
Ant Design Vue official website: https://vuecomponent.github.
7. AT-UI UI component library
AT-UI is a front-end UI component library based on Vue.js 2.0. It is mainly used for rapid development of back-end products on PC websites, and supports modern browsers and IE9 and above. AT-UI is more streamlined and implements commonly used components in the background.
AT_UI official website: https://at-ui.github.io/.
8. Vant UI component library
Vant is a lightweight and reliable mobile Vue component library. Vant is open sourced by the Youzan team, and the main maintenance is also by the Youzan team. Vant Weapp is a small program version of Vant, the Youzan mobile component library. Based on the same visual specification, the two provide a consistent API interface to help developers quickly build small program applications. Up to now, Vant has open sourced 50+ components that have been tested by Youzan’s online business. For example: AddressEdit address editing, AddressList address list, Area province and city selection, Card card, Contact contact person, Coupon coupon, GoodsAction product page action point, SubmitBar submit order column, Sku product specification bullet layer. If you are a shopping mall and don't care much about the interface and implement business logic, it is still very fast to develop with the Vant component library.
Vant official website: https://youzan.github.io/.
9. cube-ui UI component library
cube-ui is an exquisite mobile component library based on Vue.js. It is streamlined and refined from Didi's internal component library, which has experienced more than a year of business tests, and each component has sufficient unit tests to provide guarantee for subsequent integration. Pursue the ultimate in interactive experience. Follow the unified design interaction standard, highly restore the design effect; standardize the interface, unify and standardize the way of use, and make the development easier and more efficient. Support on-demand introduction and post-compilation, lightweight and flexible; strong scalability, can easily realize secondary development based on existing components.
Cube-ui official website: https://didi.github.io/.
10. Muse-UI UI component library
Muse-UI is based on the elegant Material Design UI component library of Vue 2.0. Muse UI has more than 40 UI components for adapting to different business environments. Muse UI only needs a small amount of code to complete theme style replacement. Muse UI can be used to develop complex single-page applications
Muse-UI official website: https://muse-ui.org/#/zh-CN.
11. N3-components UI component library
The N3 component library is built based on Vue.js, allowing front-end engineers and full-stack engineers to quickly build pages and applications. N3-components has more than 60 component component lists, custom styles, supports multiple modeling paradigms (UMD), and uses ES6 for development.
N3 official website: https://n3-components.github.
12. Mand Mobile
Mand Mobile is a Vue mobile UI component library for financial scenarios. It is rich, flexible, and practical. It can quickly build high-quality financial products and simplify complex financial scenarios. Mand Mobile contains a wealth of components, including 30+ basic components, covering financial scenarios, and the extremely high usability components have detailed documents and case demonstrations, absorbing the most cutting-edge technology, realizing lightweight components, taking into account stability and quality, and striving to achieve Full coverage of financial scenarios.
Mand Mobile official website: https://didi.github.io/.
13. we-vue UI component library
we-vue is a mobile component library based on Vue.js. Combined with the weui.css style library, it encapsulates a series of components, which is very suitable for mobile terminal development such as WeChat official account. we-vue contains 35+ components, the unit test coverage rate exceeds 98%, supports babel-plugin-import, complete online documentation, and detailed online examples.
we-vue official website: https://wevue.org/.
14. veui UI component library
veui is a Vue enterprise-level UI component library developed by Baidu EFE team. Currently there is no document, only demo. GitHub says it's a work in progress. Then we will be patient.
veui official website: https://ecomfe.github.io/.
15. Semantic-UI-Vue UI component library
Semantic-UI-Vue is an implementation of the Semantic-UI framework based on Vue.js. As a development framework, Semantic helps developers build elegant responsive layouts using the human-friendly HTML language. Semantic-UI-Vue provides a Semantic-UI-like API and a set of customizable themes.
Semantic-UI-Vue official website: https://semantic-ui-vue.github.
16. vue-beauty
vue-beauty is a set of PC-side UI component libraries based on vue.js and ant-design styles, designed to help developers improve product experience and development efficiency, and reduce maintenance costs. Vue-beauty contains a wealth of components, covering common scenarios, based on Vue component development, data-driven view, encapsulating complexity, providing simple and friendly API, and optimizing based on ant design style.
vue-beauty official website: https://fe-driver.github.io/.
17. NutUI component library
NutUI is a set of JD-style mobile Vue component library, developing and serving enterprise-level front-end, middle-end and back-end products for mobile web interfaces. The NutUI component library supports cross-platform, automatic transfer to WeChat applet components (online later, so stay tuned), 30+ JD mobile projects are in use, based on the JD APP 7.0 visual specification, supports on-demand loading, detailed documents and examples, Support custom themes, support multi-language (internationalization), support TypeScript, support server-side rendering (Vue SSR), support for unit testing, and is equipped with Webpack-based construction tools, which can quickly create Vue projects with built-in component libraries.
NutUI official website: https://nutui.jd.com/#/index.
When choosing a framework, you must choose according to the actual web development situation and the familiarity of the team. A good UI component library is too important for a web project. A good UI component library can get twice the result with half the effort