At present, the mainstream Vue component libraries in the market are probably iView and Element. Of course, Heyui is not in the scope. There are only a handful of 38 Stars, and most of them are colleagues I know. More hateful or can not cheat the back end of the students star, heart plug.

Star(small 💕💕) :Github

Website: www.heyui.top

On the contrast

For comparison, I have a total of several latitudes:

  • Way to get started
  • function
  • Component calls
  • Project size and dependencies
  • usage

Way to get started

According to the need to load

Element and iView support on-demand loading. Heyui is not supported. There has been a lot of thought about whether or not to support on-demand loading. Maybe Element, iView is ok, but if Heyui is used separately, the overall advantage is less, which I’ll explain later.

Style customization

In fact, all three components are similar here. Element uses SCSS, iView and Heyui uses less, using variable override. Element provides a theme generation tool, and iView has one, but this is the way to start, and now everyone is recommending variable overrides. Here, I’m going to recommend our scaffold hey-cli, and INSTEAD of overwriting these variables, I’m going to globalize them. In this way, your @primary-color can also be used in vue

. Reference: heyui demo in hey-cli-template or you can see: front-end development kill hey-cli

internationalization

Element, iView all support internationalization. Heyui is not supported. Sad. Well, if you need international support for a project, go to Element, iView. I want to say, in fact, heyui internationalization mechanism has been written, the lack of translator support, willing to find me oh.

conclusion

In fact, on demand loading and internationalization belong to the very few needs, on demand loading, I should not do this aspect of support. If there are some people with different opinions, welcome to discuss. PS: Load on demand or need to load all the styles. As for internationalization, if you have any needs or can help, please feel free to contact.

function

Feature list

Here comes the main functional comparison.




Components unique to Heyui:

  • Extend Style: Basic style.
  • The other two components have similar functionality, but are not quite the same.
  • DateFullRangePicker Super Date: A very powerful date range selector.
  • TreePicker tree selectionCan substituteTransfer shuttle boxorCascade selection with Cascader, more powerful.
  • Category selectionAnd:Cascader Cascading selectionComponents are similar, but Heyui supports radio, multiple, key, and object modes.
  • DropdownCustom: A custom drop-down component.
  • ScrollIntoView scroltoView inside a view: you’ll need it in many places.
  • Search Search box: Search box style and mechanism integration.

Components heyui does not have:

  • Transfer shuttle: There are alternative components
  • Cascader Cascading options: There are alternative components
  • Breadcrumb: Style
  • Carousel: I’m going with Swiper.
  • Collapse: style
  • Avatar: style
  • Alert: Style
  • ColorPicker: Browsers come with this component, but consider adding it if there is more demand.

Actually, this is a comparison of the three component libraries. The component libraries of Element and IView are very similar in terms of whether there is a component or not. As for Heyui, from the original intention of development, I mainly focus on versatility and extensibility. From the above comparison, Heyui does not have many style components. In fact, in the beginning, it developed tag and Panel based on iView and Element. Fact finding, rarely used. Because every system designer has a different idea. Instead, I developed the Extend style extension, which is largely empirical and has a wide range of applicability. Also developed DropdownCustom drop down control, these for extensibility above better.

Component calls

In fact, component calls between Element and iView are roughly similar. Mainly in some details of the function, there are some differences.

Component Naming

H-table iView and Heyui are named with a hump (table)

At this point, iView has an advantage over Heyui, and the code readability advantage is greater.

Component functionality

Element has an overall advantage in component functionality. Most components provide more functionality. In the case of the table component, the parameter is more than two pages, iView is more than heyui. But like Tree or AutoComplete, Heyui’s implementation is lower level, more extensible, and much more complex than Element or iView.

Data driven

In fact, this alone out to say, I have selfish, who let me be the author of Heyui. Next up is one of the biggest features of Heyui. That’s global configuration, and data-driven.

Let’s take the simplest of the Select components.

How Element is called

<template>
  <el-select v-model="value" placeholder="Please select">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

<script>
  export default {
    data() {
      return {
        options: [{
          value: 'option 1'.label: 'Golden cake'
        }, {
          value: 'option 2'.label: 'Double milk'
        }, {
          value: 'option 3'.label: 'Oyster omelette'
        }, {
          value: 'option 4'.label: 'Dragon beard noodles'
        }, {
          value: 'option 5'.label: 'Peking Duck'}].value: ' '}}}</script>
Copy the code

The way iView is called

<template>
  <el-select v-model="value" placeholder="Please select">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

<script>
  export default {
    data() {
      return {
        options: [{
          value: 'option 1'.label: 'Golden cake'
        }, {
          value: 'option 2'.label: 'Double milk'
        }, {
          value: 'option 3'.label: 'Oyster omelette'
        }, {
          value: 'option 4'.label: 'Dragon beard noodles'
        }, {
          value: 'option 5'.label: 'Peking Duck'}].value: ' '}}}</script>
Copy the code

How to call HeyUI

<template>
  <div v-padding="40">
    <Radio v-model="value" :datas="options"></Radio>
    <div v-height="20"></div>
    <Select v-model="value" :datas="options" placeholder="Please select"></Select>
    <div v-height="20"></div>
    <Tabs v-model="value" :datas="options"></Tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [{key: "a".title: "Golden cake"
        },
        {
          key: "b".title: "Double skin milk"
        },
        {
          key: "c".title: "Oyster omelette"
        },
        {
          key: "d".title: "Dragon beard noodles"
        },
        {
          key: "e".title: "Peking Duck"}].value: "a"}; }};</script>
Copy the code

The actual effect

Codesandbox. IO/s/zxl0yzv6n…

This is just a brief explanation, and I will focus on this feature in a later article.

Project size and dependencies

Here, IN fact, I am more concerned, after all, the size of the project and the dependency is still relatively important.

Project size

Haha, it feels like HeyUI has won a little bit.

Here I would also like to say objectively that Element’s JS is indeed relatively large, mainly because it has been released for a long time, and it gradually adds more functions. You can understand this by looking at the components of the Table.

Then iView’s CSS is directly using Ant Design at the beginning. In fact, Ant Design’s Design is relatively more gorgeous, so THE CSS is relatively large. However, iView has done a lot of revision in the later period, which is very different from Ant Design. The size of the CSS is still not down.

All the components of HeyUI are written by themselves, and the structure of the DOM is relatively concise. My design ideas are mostly about interaction mechanism, and I care more about some core issues. Relatively speaking, I will not make the functions large and complete. In addition, users can easily expand.

Project depend on


hey-log


hey-utils


manba

Element and iView rely primarily on async-Validator and deepMerge, and popper.js. Actually deepmerge is in my own hey-utils. Async-validator, actually I wrote my own hey-validator.

Because the previous changes were relatively large, it was not isolated, but the code has been isolated later. However, heyui or direct use of the source code.

Like I said before, I must have a disease where I can only use my own code!! (strong)

usage

Submit the number


Number of star


However, Heyui has been running on a number of online systems for almost a year, with a relatively small number of bugs.

Number of issues

Utilization summary

I won’t include some comparisons of NPM downloads here.

In fact, Element is leading in both the number of star and issues, but this does not mean that Element has an advantage. In fact, I am writing vUE component library, and I am quite clear about these two component libraries.

Relatively speaking, the number of Star for me is not a large reference, after all, iView promotion is also very good. We have a look, I am greedy for a good, mainly some of the above contrast.

Final summary

I feel that this article should not be read by many people, and it is probably for my own reading. Compared with Element and iView, Heyui is not so bad. It has many, many exciting functions. I hope you can give heyui more opportunities to show and try.