Previous review: Vue+Spring Boot before and after the end of the separation of mall project open source!

There are thousands of Vue components, as long as we can not change.

ElementUIRecent situation

Based on my recent observations, what does it mean to learn that ElementUI maintainers are all backing out? It means that we do not have to learn new things to learn, happy? Was it a surprise?

Here are some zhihu links:

Element – UI is not maintained

What do we do if ElementUI is no longer maintained and no longer supports Vue 3?

Read through the above answers, some relatively idle authors have fork ElementUI source code, their own adaptation Vue3, here I can only say two words: admiration.

So what can front-end developers do to minimize their losses?

My answer is: wait patiently for the update, don’t worry and don’t panic, the core members of the team are still working on the update of the project, the next Element Plus github.com/element-plu… It’s also continuing to iterate.

How to choose a good UI framework as a component library for a project

  • 😍 good-looking

    In order to speed up the development efficiency, small and medium-sized factories may not make too many changes to the style of the UI component library, which requires the UI component library itself to bring its own appearance level ✨.

  • 🏭 dachang blessing

    Not to say how big the factory should be, at least there should be an independent team to maintain the component library, if taoyuan three commitment is generally because of some emotional things, to do a component library, and finally the company sold to a treasure, let go of the framework, this is more embarrassing.

  • 💡 Good ecology

    What is ecology is whether the surrounding facilities around this framework are complete. For example, whether the Github Issue gives quick feedback to the questioner, whether there is a forum community or other site where users can contribute their own secondary development components (material libraries), how much open source work is available, how well documented (especially in Chinese), etc., will determine the development of the component library.

The above rankings are not in order, each one is very important, please choose according to the actual situation of your company’s business.

Analysis of existing component libraries in the market

Speaking of component libraries, I’ll skip React because It comes with Ant Design.

Vue component library can be said to be a hundred flowers bloom, a dazzling array of beautiful things in eyes, can not choose over, the following I give you a personal impression on the market these people use Vue component library.

The following is in order of order, according to Github ⭐⭐.

ElementUI

📖 author: Ele. me team (now acquired by Alibaba) ⭐Github Star: 46.8k+ 📌 Properties: PC component library

Content: 55+ common components of web development, and the component library combined with vue-CLI out of the corresponding Element plug-in, you can quickly build an Element based project. The lead-in approach also supports on-demand lead-in to reduce the volume of the project. In terms of themes, the official provides some of their own, and you can upload custom themes.

👍 Related open source projects:

  • Vue-element-admin: a background open source project based on the secondary development of ElementUI.
  • Vue-manage-system: Background management system solution based on Vue + Element UI.
  • Vue2-element-touzi-admin: Based on Vue2.0 + VUEX + ElementUI background management system.
  • Element3: An ElementUI + Vue3.0 version of the personal maintenance of MOOCs instructor Snail, although it may now be a beta version of Vue3.0. They usually do projects to play with can, but for the company’s production environment needs to think twice.

🎬 summary: From these several good types of open source projects can be seen, ElementUI is mostly used for background management system page development, business components are also used for data processing and table form display, but that sentence no one to maintain, if you use students please carefully consider the Vue3.0 to update the back.

Vuetify

📖 By John Leider, Heather Leider, Kael Watts-Deuchar, a bunch of foreign developers, you can check out the Github address above. ⭐Github star: 27k+ 📌 Properties: PC component library

Summary: Vuetify is the number one component library for Vue.js and has been under active development since 2016. This can be said to be quite excellent, from their official documents on the neat advertising can be seen that the component library by the majority of party a’s praise, have been put in advertising. The ecology is also quite well done, and there is even a paid theme. The documentation of the corresponding components is also very detailed, with explanations of useful cases and apis, which can reduce a lot of unnecessary trouble in the development process.

👍 Related open source projects:

  • Vuetify – Material-Dashboard: a management system based on the Vuetify design style.
  • Adminify: Also an open source project that integrates vuetify component libraries.
  • Vue-movie: Vuetify + Vue imitation Douban movie project.
  • Electron -vue-music: electron + vue + vuetify

🎬 summary: is it my illusion? There are few good open source projects to be found on Github, and the incompatibility with Edge and IE may not make it very popular in China. If a company has a need to support IE, think twice before choosing it.

Vux

📖 author: Airyland and other personal maintenance projects ⭐Github Star: 17.2k+ 📌 Properties: Mobile component library, based on WeUI

Introduction: I am very gratified that there is such an excellent personal development can develop such a good component library, assembled some people with lofty ambitions to maintain this looks not how amazing open source project. The authors were blunt at the bottom of the official document: “Poor experience, personal maintenance. “I’ve taken a look at the Github activity of major contributors and the recent Issues resolved, and I can safely say that the framework will last as long as the authors are alive. In particular, wechat H5 development of friends, this component library UI is based on wechat official style design, very fit, recommended to use.

👍 Related open source projects:

  • Vux2.5-webapp: a mall project developed based on VUX.
  • Vue2-vux-fitness – Project: a seed project based on vUX development, which students can use as a starting project.
  • Vue-music: Vux + VUE imitation cloud music project.

🎬 summary: good documentation, many components, and the exclusive sponsorship of the cloud. But it is a personal maintenance project, and the latest update time is in April 2019, I still like this open source project very much, I hope the author can continue to update, after upgrading Vue3, it is not recommended to use.

Vant

📖 by Youzan Technical team ⭐Github Star: 14.6k+ 📌 Property: Mobile Component library

Introduction: Vant is a mobile component library that supports TS, SSR, import on demand, internationalization, and most importantly, small programs. The official documentation is available in Both Chinese and English, and is developer friendly, with examples and presentations. Component rich, because the like team is doing the mall, so Vant supports some of the mall’s characteristic components, such as address bar, province, card, coupon, submit order, product specifications, etc.

👍 Related open source projects:

  • Newbee-mall -vue-app: newbee mall vue version.

  • Vant -demo: Vant official sample collection, including vant, vant appp and Vant Cli related examples, please open each directory to view the details.

  • Vant – weapp: vant weapp is mobile terminal Vue component library vant small program version, both specification based on the same vision, to provide a consistent API interface, help developers to quickly build applications.

🎬 Summary: Looking at the following Github Issue, the last one was updated a few days ago, showing that the framework is being maintained. There is no need for developers to worry that the library will no longer be maintained. We believe that when Vue3 is released, the team will also upgrade the library.

Ant-design-vue

📖 author: Tang Jinzhou ⭐Github Star: 11.3k+ 📌 Attribute: PC component library

This is the Vue implementation of Ant Design, which develops and services enterprise-class backend products. The addition of Ant appears to be developed by Ant Financial, but it is actually a one-to-one copy of ant-Design made by an individual.

👍 Related open source projects:

  • Ant-design-vue-pro: Ant Design Pro based on Ant Design of Vue.
  • Vue-alain: A background framework implemented with VUe-CLI 3.0, TypeScript, and Ant-design-Vue.
  • K-form-design: A form designer based on Vue and Ant-design-Vue implementations.

🎬 Summary: Ant-design – Vue is also one of the domestic individual developers, copying more successful cases, riding ant Financial this wave of flow, rapidly rising star. The components are ok, the problems are updated in time, and a proper component library is available.

Cube-UI

📖 author: Didi Team ⭐Github Star: 8.3k+ 📌 Property: Mobile Component Library

Introduction: From the official document, it can be seen that it is developed and maintained by didi team. The number of components is not very large and there are no features. The latest version was released in April this year, and the version update is not timely.

👍 Related open source projects:

  • Cube – Application – Guide: a quick tutorial to get started with cube- UI.

🎬 Summary: THERE is no more introduction here, and only the internal staff of Didi will use it. After all, there are so many components in Vue mobile terminal, why should I choose a component library that is ugly and not timely maintained? Goodbye 👋.

Mand-Mobile

📖 author: Didi Team ⭐Github Star: 2.7k+ 📌 Properties: Mobile Component library

Mand Mobile is a Mobile component library for financial scenarios. It is implemented based on Vue.js. At present, it has been actually applied in more than 10 products of didi’s four major financial business sectors. 40+ utility components to meet basic business requirements.

👍 Related open source projects:

  • Palette: Mand-Mobile’s visual theme editor.

🎬 summary: This mobile component is very distinctive, just as Vant is for ecommerce and Mand is for finance. There are a wealth of financial business related components, such as financial numbers, bills, verification code, cashier, line table, scale, numeric keyboard and so on. If your company is in the finance business, try this library of components.

NutUI

📖 author: jd.com team ⭐Github Star: 2.2k+ 📌 Attribute: Mobile Component library

Introduction: at the beginning of 2020, a new ship component library was released. NutUI is a set of JD.com style mobile component libraries that develop and service enterprise-class products for mobile Web interfaces. 50+ high quality components, 40+ JD.com mobile terminal project in use.

👍 Related open source projects:

  • Nutui-demo: builds a Nutui example project based on the Vue CLI.

🎬 summary: just out, open source projects are not many, if the component library of JD do well, may be more than Vant have praise, after all, dongg regard us as brothers, his technical team will certainly not pit us. There are several features within the component, such as digital countdown, picture lazy loading, video, delivery time, turntable draw, signature, address selection, and so on. To tell you the truth, I was surprised when I saw the turntable draw, JINGdong ~ really have you!!

There are many many unknown to the self-employed, the heart of the maintenance of their own component library, in this is not a take out the introduction, because really many!! Please feel free to share your favorite component libraries in the comments section as well. Thanks for watching.

Finally, I would like to recommend the project of Vue Mall written by myself. Students who are interested in it can watch it and give me a star:

Newbee-mall has created a code repository on Both GitHub and the national code cloud. If you are slow to access GitHub, you are advised to check out the project on Gitee. The two repositories will be updated synchronously.

  • newbee-mall in GitHub : https://github.com/newbee-ltd/newbee-mall-vue-app
  • newbee-mall in Gitee : https://gitee.com/newbee-ltd/newbee-mall-vue-app

In addition to indicate the reprint/source, all are the author’s original, welcome to reprint, but without the consent of the author must retain this paragraph of statement, and in the article page clearly given the original link, or reserve the right to seek legal responsibility.