目前，市面上主流的Vue組件庫大概就是iview, element。
當(dāng)然，heyui不在范圍內(nèi)，38個(gè)star屈指可數(shù)，大部分還是認(rèn)識(shí)的同事。
更可惡的還是騙不來后端同學(xué)的star，心塞。

求Star(小????)：Github
<a target="_blank"><img src="https://user-gold-cdn.xitu.io/2018/2/28/161da9008bd752dd?w=218&h=74&f=jpeg&s=8072" height="40"></img></a>

官網(wǎng)： http://www.heyui.top

關(guān)于對(duì)比

對(duì)比呢，我總共出了幾個(gè)緯度：

入門方式
功能
組件調(diào)用
項(xiàng)目大小與依賴
使用率

入門方式

按需加載

element，iview都支持按需加載。
heyui不支持。
關(guān)于支不支持按需加載，思考了很久。
也許element, iview還可以，但是如果heyui拆分組件使用，整體優(yōu)勢(shì)不大，后面我再介紹。

樣式自定義

其實(shí)，這里三個(gè)組件都是差不多的。
element使用scss，iview和heyui使用less，使用變量覆蓋的方式就可以了。
element提供了一個(gè)主題生成的工具，對(duì)應(yīng)iview也有一個(gè)，但是這是一開始的方式了，現(xiàn)在大家都是推薦變量覆蓋的方式。
這里，我就要推薦我們的腳手架hey-cli，我把這些變量不是采用覆蓋的方式，而是使用全局化的方式。
這樣，你的@primary-color一樣可以在vue的<style lang="less"/>中使用。
參考：hey-cli-template中heyui的demo
或者可以看一下：前端開發(fā)大殺器hey-cli

國際化

element，iview都支持國際化。
heyui不支持。
傷心。
嗯嗯，如果需要國際化支持的項(xiàng)目，請(qǐng)移步element，iview。
我想說，其實(shí)heyui國際化的機(jī)制都已經(jīng)寫好了，缺翻譯人員support，有意愿的人可以找我哦。

總結(jié)

其實(shí)按需加載與國際化都屬于極少數(shù)的需求，按需加載，我應(yīng)該不會(huì)做這一方面的支持的。
如果有一些不同意見的人，歡迎討論。
PS: 按需加載還是需要加載所有的樣式的。
至于國際化，如果有需求或者可以提供幫助的人，歡迎聯(lián)系。

功能

功能列表

主要的功能對(duì)比來了。

image

其實(shí)，element和iview的功能都比較類似，而heyui相對(duì)來說，和他們的區(qū)別有一些大。
首先，基礎(chǔ)的組件都是有的，那區(qū)別在哪里呢？
heyui獨(dú)有的組件：

Extend 樣式擴(kuò)展：基礎(chǔ)樣式。
TagInput 標(biāo)簽輸入框：其實(shí)其他兩個(gè)組件有類似功能，但是其實(shí)不太一樣。
DateFullRangePicker 超級(jí)日期：功能十分強(qiáng)大的日期范圍選擇器。
TreePicker 樹選擇：可以替代Transfer 穿梭框或者與Cascader 級(jí)聯(lián)選擇，功能更強(qiáng)大。
Category 分類選擇：與Cascader 級(jí)聯(lián)選擇組件其實(shí)是類似的功能，但是heyui支持單選，多選，key模式與對(duì)象模式。
DropdownCustom 下拉控件：自定義的下拉組件。
ScrollIntoView 滾動(dòng)至視圖內(nèi)：相信很多地方你都會(huì)需要。
Search 搜索框：搜索框的樣式與機(jī)制集成。

heyui沒有的組件：

Transfer 穿梭框：有替代組件
Cascader 級(jí)聯(lián)選擇：有替代組件
Breadcrumb 面包屑：樣式
Carousel 走馬燈：我會(huì)選用Swiper。
Collapse 折疊面板：樣式
Avatar 頭像：樣式
Alert 警告提示：樣式
ColorPicker 顏色選擇器：瀏覽器自帶有這個(gè)組件，不過如果有更多的需求量，可以考慮增加。

其實(shí)，這個(gè)是三個(gè)組件庫的比對(duì)。
如果單獨(dú)從有沒有某種組件來判斷，其實(shí)element和iview的組件庫是非常類似的。
而對(duì)于heyui，從我的開發(fā)初衷來看，我注重的主要是通用性，擴(kuò)展性。
從上面的比對(duì)上來看，heyui沒有很多的樣式組件，其實(shí)一開始參考了iview與element，開發(fā)了tag與panel。
事實(shí)發(fā)現(xiàn)，很少用到。
因?yàn)槊恳粋€(gè)系統(tǒng)的設(shè)計(jì)師都擁有不同的想法。
相反，我開發(fā)了Extend 樣式擴(kuò)展，這個(gè)主要是從經(jīng)驗(yàn)上總結(jié)出來的，適用性很廣。
還開發(fā)了DropdownCustom 下拉控件，這些對(duì)于擴(kuò)展性上面來說更好。

組件調(diào)用

其實(shí)element與iview之間的組件調(diào)用，大致相似。
主要在一些細(xì)節(jié)功能上，有一些差別。

組件命名方式

element用的是短橫線分隔式命名，例：h-table
iview和heyui用的是駝峰式命名，例：Table

這一點(diǎn)上面，iview與heyui比較有優(yōu)勢(shì)，代碼可讀性上面優(yōu)勢(shì)更大一些。

組件的功能性

element在組件的功能性上面整體占優(yōu)勢(shì)。
大多數(shù)組件提供的功能都比較多。
就以table組件來說，參數(shù)是兩頁屏幕都看不完，iview比heyui更多。
但是像tree或者autocomplete，heyui的實(shí)現(xiàn)更底層，更易擴(kuò)展，比element和iview復(fù)雜的多。

<span style="color:red">數(shù)據(jù)驅(qū)動(dòng)</span>

其實(shí)這個(gè)單獨(dú)拿出來說，我是有私心的，誰讓我是heyui的作者。
接下來展示的是heyui的最大的一個(gè)特色。
那就是全局配置，以及數(shù)據(jù)驅(qū)動(dòng)。

我們以最簡單的Select組件為例子。

Element的調(diào)用方式

<template>
  <el-select v-model="value" placeholder="請(qǐng)選擇">
    <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: '選項(xiàng)1',
          label: '黃金糕'
        }, {
          value: '選項(xiàng)2',
          label: '雙皮奶'
        }, {
          value: '選項(xiàng)3',
          label: '蚵仔煎'
        }, {
          value: '選項(xiàng)4',
          label: '龍須面'
        }, {
          value: '選項(xiàng)5',
          label: '北京烤鴨'
        }],
        value: ''
      }
    }
  }
</script>

iView的調(diào)用方式

<template>
  <el-select v-model="value" placeholder="請(qǐng)選擇">
    <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: '選項(xiàng)1',
          label: '黃金糕'
        }, {
          value: '選項(xiàng)2',
          label: '雙皮奶'
        }, {
          value: '選項(xiàng)3',
          label: '蚵仔煎'
        }, {
          value: '選項(xiàng)4',
          label: '龍須面'
        }, {
          value: '選項(xiàng)5',
          label: '北京烤鴨'
        }],
        value: ''
      }
    }
  }
</script>

HeyUI的調(diào)用方式

<template>
  <div v-padding="40">
    <Radio v-model="value" :datas="options"></Radio>
    <div v-height="20"></div>
    <Select v-model="value" :datas="options" placeholder="請(qǐng)選擇"></Select>
    <div v-height="20"></div>
    <Tabs v-model="value" :datas="options"></Tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          key: "a",
          title: "黃金糕"
        },
        {
          key: "b",
          title: "雙皮奶"
        },
        {
          key: "c",
          title: "蚵仔煎"
        },
        {
          key: "d",
          title: "龍須面"
        },
        {
          key: "e",
          title: "北京烤鴨"
        }
      ],
      value: "a"
    };
  }
};
</script>

實(shí)際效果

image

代碼鏈接：https://codesandbox.io/s/zxl0yzv6np，點(diǎn)擊demo1的按鈕

這里就只是簡單的說明，后期我會(huì)著重在這一個(gè)功能上面寫一篇文章。

項(xiàng)目大小與依賴

這里，其實(shí)我還是比較在意的，畢竟項(xiàng)目的大小和依賴還是比較重要的。

項(xiàng)目大小

image

哈哈，感覺HeyUI有一點(diǎn)完勝的感覺。

這里我也比較客觀的說一下，Element的JS大小的確比較大，主要是因?yàn)榘l(fā)布的時(shí)間比較長，逐步增加的功能比較多，你去看看Table的組件就可以理解。

然后iView的CSS一開始是直接用的Ant Design的，其實(shí)Ant Design的設(shè)計(jì)相對(duì)來說更華麗一些，所以CSS相對(duì)來說比較大一些，不過后期iView做了大量的改版，已經(jīng)和Ant Design區(qū)別很大了，就是CSS的大小依舊沒有降下來。

而HeyUI的所有組件都是自己寫的，相對(duì)DOM的結(jié)構(gòu)都比較簡潔一些。
而我的設(shè)計(jì)想法比較多的是交互機(jī)制，比較在意一些核心的問題，相對(duì)來說，功能我不會(huì)做的大而全，另外，使用的用戶也可以更方便擴(kuò)展。

項(xiàng)目依賴

image

其實(shí)項(xiàng)目依賴上面，heyui，可以說是沒有。
hey-log: console.log -> log 一個(gè)自己家的小工具
hey-utils: 自己家的公用方法
manba: 自己寫的日期工具

而element與iview，其實(shí)主要的是依賴async-validator與deepmerge，還有popper.js。
其實(shí)deepmerge我自己寫的hey-utils里面也有啦。
async-validator，其實(shí)我自己寫了hey-validator。

因?yàn)榍捌诟膭?dòng)比較大，就沒有單獨(dú)出來，后面已經(jīng)把代碼獨(dú)立出來了。
不過heyui還是直接用的源碼。

就像前面說的，我一定是得了只能用自己寫的代碼的病!!!(堅(jiān)強(qiáng))

使用率

提交次數(shù)

image

從時(shí)間的緯度上來說，其實(shí)提交的頻率Element相對(duì)來說更多一些。
這也是因?yàn)镋lement團(tuán)隊(duì)人員人數(shù)較多的原因。

star數(shù)

image

其實(shí)關(guān)于star數(shù)，我就不對(duì)比了，十萬點(diǎn)傷害。
很多的star也意味著更多的使用者，更多的測(cè)試者，相對(duì)來說，bug數(shù)量也少許多。

不過，heyui也在諸多線上的系統(tǒng)運(yùn)行，也運(yùn)行了快一年了，相對(duì)來說，bug數(shù)量也屈指可數(shù)。

issues數(shù)

image

歡迎大家使用heyui(諂媚微笑)。

使用率總結(jié)

這里我就不放npm下載量的一些對(duì)比了。

其實(shí)Element不管是star數(shù)量或者是issues的數(shù)量都是嗷嗷領(lǐng)先，但是這并不代表Element更具備優(yōu)勢(shì)，其實(shí)我自己在寫vue組件庫，這兩個(gè)組件庫我還是比較清楚的。

相對(duì)來說，star數(shù)量對(duì)于我來說就沒有很大的參考量了，畢竟iView的推廣也非常的好。
大家看看就好，我眼饞一下就好，主要還是上面的一些對(duì)比。

最終總結(jié)

感覺這一篇文章應(yīng)該沒有很多人看，大概是做給我自己看的。
heyui與element和iview相比，并沒有很差，有很多很多亮眼的功能，希望大家給heyui多一些展示的機(jī)會(huì)，多一些嘗試的機(jī)會(huì)。

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

Vue組件庫大對(duì)比--HeyUI, iView, Element

Vue組件庫大對(duì)比--HeyUI, iView, Element

關(guān)于對(duì)比

入門方式

按需加載

樣式自定義

國際化

總結(jié)

功能

功能列表

組件調(diào)用

組件命名方式

組件的功能性

<span style="color:red">數(shù)據(jù)驅(qū)動(dòng)</span>

項(xiàng)目大小與依賴

項(xiàng)目大小

項(xiàng)目依賴

使用率

提交次數(shù)

star數(shù)

issues數(shù)

使用率總結(jié)

最終總結(jié)

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

Vue組件庫大對(duì)比--HeyUI, iView, Element

關(guān)于對(duì)比

入門方式

按需加載

樣式自定義

國際化

總結(jié)

功能

功能列表

組件調(diào)用

組件命名方式

組件的功能性

<span style="color:red">數(shù)據(jù)驅(qū)動(dòng)</span>

項(xiàng)目大小與依賴

項(xiàng)目大小

項(xiàng)目依賴

使用率

提交次數(shù)

star數(shù)

issues數(shù)

使用率總結(jié)

最終總結(jié)

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av