標籤：

Vue組件庫大對比--HeyUI, iView, Element

03-07

目前，市面上主流的Vue組件庫大概就是iview, element。

當然，heyui不在範圍內，38個star屈指可數，大部分還是認識的同事。

更可惡的還是騙不來後端同學的star，心塞。

求Star(小????)：Github

官網： http://www.heyui.top

關於對比

對比呢，我總共出了幾個緯度：

  • 入門方式
  • 功能
  • 組件調用
  • 項目大小與依賴
  • 使用率

入門方式

按需載入

element，iview都支持按需載入。

heyui不支持。

關於支不支持按需載入，思考了很久。

也許element, iview還可以，但是如果heyui拆分組件使用，整體優勢不大，後面我再介紹。

樣式自定義

其實，這裡三個組件都是差不多的。 element使用scss，iview和heyui使用less，使用變數覆蓋的方式就可以了。

element提供了一個主題生成的工具，對應iview也有一個，但是這是一開始的方式了，現在大家都是推薦變數覆蓋的方式。

這裡，我就要推薦我們的腳手架hey-cli，我把這些變數不是採用覆蓋的方式，而是使用全局化的方式。

這樣，你的@primary-color一樣可以在vue的<style lang="less"/>中使用。

參考：hey-cli-template中heyui的demo

或者可以看一下：前端開發大殺器hey-cli

國際化

element，iview都支持國際化。

heyui不支持。

傷心。

嗯嗯，如果需要國際化支持的項目，請移步element，iview。

我想說，其實heyui國際化的機制都已經寫好了，缺翻譯人員support，有意願的人可以找我哦。

總結

其實按需載入與國際化都屬於極少數的需求，按需載入，我應該不會做這一方面的支持的。

如果有一些不同意見的人，歡迎討論。

PS: 按需載入還是需要載入所有的樣式的。

至於國際化，如果有需求或者可以提供幫助的人，歡迎聯繫。

功能

功能列表

主要的功能對比來了。

目前，市面上主流的Vue組件庫大概就是iview, element。

當然，heyui不在範圍內，38個star屈指可數，大部分還是認識的同事。

更可惡的還是騙不來後端同學的star，心塞。

求Star(小????)：Github

官網： http://www.heyui.top

關於對比

對比呢，我總共出了幾個緯度：

  • 入門方式
  • 功能
  • 組件調用
  • 項目大小與依賴
  • 使用率

入門方式

按需載入

element，iview都支持按需載入。

heyui不支持。

關於支不支持按需載入，思考了很久。

也許element, iview還可以，但是如果heyui拆分組件使用，整體優勢不大，後面我再介紹。

樣式自定義

其實，這裡三個組件都是差不多的。 element使用scss，iview和heyui使用less，使用變數覆蓋的方式就可以了。

element提供了一個主題生成的工具，對應iview也有一個，但是這是一開始的方式了，現在大家都是推薦變數覆蓋的方式。

這裡，我就要推薦我們的腳手架hey-cli，我把這些變數不是採用覆蓋的方式，而是使用全局化的方式。

這樣，你的@primary-color一樣可以在vue的<style lang="less"/>中使用。

參考：hey-cli-template中heyui的demo

或者可以看一下：前端開發大殺器hey-cli

國際化

element，iview都支持國際化。

heyui不支持。

傷心。

嗯嗯，如果需要國際化支持的項目，請移步element，iview。

我想說，其實heyui國際化的機制都已經寫好了，缺翻譯人員support，有意願的人可以找我哦。

總結

其實按需載入與國際化都屬於極少數的需求，按需載入，我應該不會做這一方面的支持的。

如果有一些不同意見的人，歡迎討論。

PS: 按需載入還是需要載入所有的樣式的。

至於國際化，如果有需求或者可以提供幫助的人，歡迎聯繫。

功能

功能列表

主要的功能對比來了。

其實，element和iview的功能都比較類似，而heyui相對來說，和他們的區別有一些大。

首先，基礎的組件都是有的，那區別在哪裡呢？

heyui獨有的組件：

  • Extend 樣式擴展：基礎樣式。
  • TagInput 標籤輸入框：其實其他兩個組件有類似功能，但是其實不太一樣。
  • DateFullRangePicker 超級日期：功能十分強大的日期範圍選擇器。
  • TreePicker 樹選擇：可以替代Transfer 穿梭框或者與Cascader 級聯選擇，功能更強大。
  • Category 分類選擇：與Cascader 級聯選擇組件其實是類似的功能，但是heyui支持單選，多選，key模式與對象模式。
  • DropdownCustom 下拉控制項：自定義的下拉組件。
  • ScrollIntoView 滾動至視圖內：相信很多地方你都會需要。
  • Search 搜索框：搜索框的樣式與機制集成。

heyui沒有的組件：

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

其實，這個是三個組件庫的比對。

如果單獨從有沒有某種組件來判斷，其實element和iview的組件庫是非常類似的。

而對於heyui，從我的開發初衷來看，我注重的主要是通用性，擴展性。

從上面的比對上來看，heyui沒有很多的樣式組件，其實一開始參考了iview與element，開發了tag與panel。

事實發現，很少用到。

因為每一個系統的設計師都擁有不同的想法。

相反，我開發了Extend 樣式擴展，這個主要是從經驗上總結出來的，適用性很廣。

還開發了DropdownCustom 下拉控制項，這些對於擴展性上面來說更好。

組件調用

其實element與iview之間的組件調用，大致相似。

主要在一些細節功能上，有一些差別。

組件命名方式

element用的是 短橫線分隔式命名，例：h-table

iview和heyui用的是 駝峰式命名，例：Table

這一點上面，iview與heyui比較有優勢，代碼可讀性上面優勢更大一些。

組件的功能性

element在組件的功能性上面整體佔優勢。

大多數組件提供的功能都比較多。

就以table組件來說，參數是兩頁屏幕都看不完，iview比heyui更多。

但是像tree或者autocomplete，heyui的實現更底層，更易擴展，比element和iview複雜的多。

數據驅動

其實這個單獨拿出來說，我是有私心的，誰讓我是heyui的作者。

接下來展示的是heyui的最大的一個特色。 那就是全局配置，以及數據驅動。

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

Element的調用方式

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

iView的調用方式

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

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="請選擇"></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>

實際效果

代碼鏈接：codesandbox.io/s/rj8p57，點擊demo1的按鈕

這裡就只是簡單的說明，後期我會著重在這一個功能上面寫一篇文章。

項目大小與依賴

這裡，其實我還是比較在意的，畢竟項目的大小和依賴還是比較重要的。

項目大小

哈哈，感覺HeyUI有一點完勝的感覺。

這裡我也比較客觀的說一下，Element的JS大小的確比較大，主要是因為發布的時間比較長，逐步增加的功能比較多，你去看看Table的組件就可以理解。

然後iView的CSS一開始是直接用的Ant Design的，其實Ant Design的設計相對來說更華麗一些，所以CSS相對來說比較大一些，不過後期iView做了大量的改版，已經和Ant Design區別很大了，就是CSS的大小依舊沒有降下來。

而HeyUI的所有組件都是自己寫的，相對DOM的結構都比較簡潔一些。

而我的設計想法比較多的是交互機制，比較在意一些核心的問題，相對來說，功能我不會做的大而全，另外，使用的用戶也可以更方便擴展。

項目依賴

其實項目依賴上面，heyui，可以說是沒有。

hey-log: console.log -> log 一個自己家的小工具

hey-utils: 自己家的公用方法

manba: 自己寫的日期工具

而element與iview，其實主要的是依賴async-validator與deepmerge，還有popper.js。

其實deepmerge我自己寫的hey-utils裡面也有啦。

async-validator，其實我自己寫了hey-validator。

因為前期改動比較大，就沒有單獨出來，後面已經把代碼獨立出來了。

不過heyui還是直接用的源碼。

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

使用率

提交次數

從時間的緯度上來說，其實提交的頻率Element相對來說更多一些。

這也是因為Element團隊人員人數較多的原因。

star數

其實關於star數，我就不對比了，十萬點傷害。

很多的star也意味著更多的使用者，更多的測試者，相對來說，bug數量也少許多。

不過，heyui也在諸多線上的系統運行，也運行了快一年了，相對來說，bug數量也屈指可數。

issues數

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

使用率總結

這裡我就不放npm下載量的一些對比了。

其實Element不管是star數量或者是issues的數量都是嗷嗷領先，但是這並不代表Element更具備優勢，其實我自己在寫vue組件庫，這兩個組件庫我還是比較清楚的。

相對來說，star數量對於我來說就沒有很大的參考量了，畢竟iView的推廣也非常的好。

大家看看就好，我眼饞一下就好，主要還是上面的一些對比。

最終總結

感覺這一篇文章應該沒有很多人看，大概是做給我自己看的。

heyui與element和iview相比，並沒有很差，有很多很多亮眼的功能，希望大家給heyui多一些展示的機會，多一些嘗試的機會。


推薦閱讀：

※Tips on iView 2
※element ui官網教程極其不詳細？

TAG:iview | Vuejs |