In 2018, I wrote a Vue component library comparison document: juejin.cn/post/684490…

Over the course of a year, each component library has evolved more, and Ant Design has come out with a VUE version of the component library.

So, this year, I evaluated the current stable and fully functional Vue component library.

🐔 About evaluation

I’m sure anyone reading this article will also have some questions about “Which component library to use?” This question bothers me.

The choice of component library has a crucial influence on the development of front-end system.

Component richness and robustness are key considerations.

Therefore, this comparison, mainly from the number of components, as well as the comparison of core components to judge.

As for which component library to choose, in fact, from the developer’s point of view, each component library can be chosen, basically, the four component libraries have been quite perfect, developers can choose according to their own needs.

💐 component library

Element UI

Official website: element.elem. IO /#/

Making: github.com/ElemeFE/ele…

iView UI

Official website: www.iviewui.com/

Github: github.com/iview/iview

Ant Design of Vue

Official site: vue. Ant. The design/docs/vue/in…

Making: github.com/vueComponen…

HeyUI

Official website: www.heyui.top/

Making: github.com/heyui/heyui…

🚀 Component Comparison

I spent some time doing a detailed comparison of the four component libraries.

Based on the component

Four component libraries, with about 48 components all available.

  • The Grid Grid
  • Layout Layout
  • Icon Icon
  • The Button Button
  • The Input fields
  • Radio Radio
  • The Checkbox multi-select
  • Select Select from the drop-down list
  • AutoComplete fuzzy matching
  • NumberInput indicates the NumberInput
  • The Switch Switch
  • The Slider sliding block
  • What score
  • SwitchList Option switch
  • Form Form
  • Search Search box
  • Uploader to upload
  • Tree Tree
  • Transfer shuttle box
  • DatePicker Date selection
  • TimePicker Time selection
  • DatetimePicker Date and time selection
  • DateRangePicker Date range selection
  • Cascader cascade selection
  • Breadcrumb bread crumbs
  • The Menu Menu
  • Pagination paging
  • Tabs TAB
  • Article Steps Steps
  • DropdownMenu DropdownMenu
  • BackTop returns to the top
  • The Panel Panel
  • The Tag label
  • Table form
  • Avatar Avatar Information
  • The Badge micro standard number
  • Carousel regimes
  • Collapse panel
  • The Progress bar
  • Loading in the load
  • LoadingBar Loads the progress bar
  • Timeline Timeline
  • The Message prompt
  • Notice to inform
  • Modal pop-up
  • Tooltip bubble prompt
  • Poptip determines the prompt
  • Circle the progress of ring

PS, each component library is not necessarily named the same, but is roughly the same component.

Among them, Form, Table, Select, AutoComplete, Tree and DatePicker are the core components of a component library in my opinion.

And different component libraries in the implementation of these components, there are more differences.

Here, I mainly focus on the difference analysis of Table, and other components, users can refer to their own needs, and then compare one by one.

Table Component Comparison

I have not seen relevant documents about “custom index” in iView and Ant Design Vue in statistics, so it may not be correct.

Comparatively speaking, Element and Ant Design Vue have more functions in Table. If your Table application needs more, I recommend using these two components.

Comparison of Other Components

As you can see from the comparison above, each component library has a different type of development, so you can also refer to it when choosing.

The comparison summary

At the current time point, each component library has reached a state of complete functionality, even if the late update, it should only be a small amount of update.

In the selection of technology, developers can choose according to their own needs.

The results of this review, to my surprise, are that each component library is different in terms of component design choices, but the total number of components is almost the same.

✨ Component Recommendation

Each component library has a unique and bright component, here, I focus on the recommendation, you can also refer to their own needs to make a choice.

Iview-split Panel Split

Cut the displayed content, and drag to modify the segmentation.

Link: www.iviewui.com/components/…

Heyui-datefullrangepicker super date range control

Super date range control is a more practical function, basically meet all the needs of date range selection.

Link: www.heyui.top/component/d…

Element-calendar Calendar

Display of basic calendar

Link: element. The eleme. IO / # / useful – CN/com…

Heyui-treepicker tree selector

Select data based on data in Tree mode.

Link: www.heyui.top/component/p…

Ant Design VuE-TreesELECT tree selector

Select data based on data in Tree mode.

Link: vue. Ant. The design/components /…

Heyui-categorypicker linkage selector

Select the information for association.

Link: www.heyui.top/component/o…

Element-image Image

Integrate all requirements for picture presentation

Link: element. The eleme. IO / # / useful – CN/com…

Heyui-imagepreview ImagePreview

Picture preview function and picture list display.

Link: www.heyui.top/component/o…

Element-v-loading is being loaded

Control the loading style by means of instructions

Link: element. The eleme. IO / # / useful – CN/com…

Heyui-textellipsis goes beyond textual ellipsis

More than one line text elision function.

Link: www.heyui.top/component/o…

Heyui-clipboard Copies the Clipboard

Copy clipboard integration

Link: www.heyui.top/component/o…