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

時間 2019-11-05

標籤 vue 組件對比 heyui iview element 简体版

原文原文鏈接

目前，市面上主流的Vue組件庫大概就是iview, element。
固然，heyui不在範圍內，38個star屈指可數，大部分仍是認識的同事。
更可惡的仍是騙不來後端同窗的star，心塞。javascript

求Star(小💕💕)：Github
css

官網： www.heyui.tophtml

關於對比

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

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

入門方式

按需加載

element，iview都支持按需加載。
heyui不支持。
關於支不支持按需加載，思考了好久。
也許element, iview還能夠，可是若是heyui拆分組件使用，總體優點不大，後面我再介紹。vue

樣式自定義

其實，這裏三個組件都是差很少的。 element使用scss，iview和heyui使用less，使用變量覆蓋的方式就能夠了。
element提供了一個主題生成的工具，對應iview也有一個，可是這是一開始的方式了，如今你們都是推薦變量覆蓋的方式。
這裏，我就要推薦咱們的腳手架hey-cli，我把這些變量不是採用覆蓋的方式，而是使用全局化的方式。
這樣，你的@primary-color同樣能夠在vue的<style lang="less"/>中使用。
參考：hey-cli-template中heyui的demo
或者能夠看一下：前端開發大殺器hey-clijava

國際化

element，iview都支持國際化。
heyui不支持。
傷心。
嗯嗯，若是須要國際化支持的項目，請移步element，iview。
我想說，其實heyui國際化的機制都已經寫好了，缺翻譯人員support，有意願的人能夠找我哦。git

總結

其實按需加載與國際化都屬於極少數的需求，按需加載，我應該不會作這一方面的支持的。
若是有一些不一樣意見的人，歡迎討論。
PS: 按需加載仍是須要加載全部的樣式的。
至於國際化，若是有需求或者能夠提供幫助的人，歡迎聯繫。github

功能

功能列表

主要的功能對比來了。npm

其實，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>
複製代碼