2019年 Vue 組件庫大評測 Element, iView, HeyUI, Ant Design Vue

2018年我寫的Vue組件庫對比文檔：
juejin.im/post/5a9628…

一年的時間，每個組件庫都有了更多的發展，Ant Design 也出了vue版本的組件庫。

因此，在今年，我對目前發展比較穩定以及功能比較齊全的 Vue組件庫作出了評測。

🐔關於評測

相信看這一篇文章的人，確定也會對 「選擇使用哪一個組件庫？」 這個問題感到煩惱。

組件庫的選擇，對於前端系統的開發有着相當緊要的影響，

而組件的豐富性以及健壯性是咱們要考慮的重點。

因此，本次比對，主要是從組件的多少，以及核心組件的對比來評判。

而對於選擇哪一個組件庫的這個問題，其實，我從開發者的角度來講，每一個組件庫均可以選擇，基本上，四種組件庫都已經挺完善的了，開發者按照本身的需求選擇便可。

💐組件庫

Element UI

官方網站：element.eleme.io/#/

Github: github.com/ElemeFE/ele…

iView UI

官方網站：www.iviewui.com/

Github: github.com/iview/iview

Ant Design of Vue

官方網站：vue.ant.design/docs/vue/in…

Github: github.com/vueComponen…

HeyUI

官方網站：www.heyui.top/

Github: github.com/heyui/heyui…

🚀組件對比

我花了一些時間，對這四款組件庫作了一個比較詳細的比較。

基礎組件

四個組件庫，大概有48個都具有的組件。

• Grid 柵格
• Layout 佈局
• Icon 圖標
• Button 按鈕
• Input 輸入框
• Radio 單選
• Checkbox 多選
• Select 下拉選擇
• AutoComplete 模糊匹配
• NumberInput 數字輸入
• Switch 開關
• Slider 滑塊
• Rate 評分
• SwitchList 選項切換
• Form 表單
• Search 搜索框
• Uploader 上傳
• Tree 樹
• Transfer 穿梭框
• DatePicker 日期選擇
• TimePicker 時間選擇
• DatetimePicker 日期時間選擇
• DateRangePicker 日期範圍選擇
• Cascader 級聯選擇
• Breadcrumb 麪包屑
• Menu 菜單
• Pagination 分頁
• Tabs 標籤頁
• Steps 步驟條
• DropdownMenu 下拉菜單
• BackTop 返回頂部
• Panel 面板
• Tag 標籤
• Table 表格
• Avatar 頭像信息
• Badge 微標數
• Carousel 走馬燈
• Collapse 摺疊面板
• Progress 進度條
• Loading 加載中
• LoadingBar 加載進度條
• Timeline 時間軸
• Message 提示
• Notice 通知
• Modal 彈出框
• Tooltip 氣泡提示
• Poptip 肯定提示
• Circle 進度環

PS，每一個組件庫不必定是相同的命名，可是，大體是同樣的組件。

其中，Form，Table，Select，AutoComplete，Tree，DatePicker是我認爲的一個組件庫的核心組件。

而不一樣的組件庫在這幾個組件上的實現，都是有比較多差別的。

這裏，我主要着重於Table的差別分析，其餘的組件，用戶能夠參考本身的需求，再逐一對比。

Table 組件對比

統計中關於「自定義索引」，iview 與 Ant Design Vue我並未看到相關文檔，不必定正確。

相對來講，Element和Ant Design Vue在Table上的功能稍微比較多，若是，大家系統的Table應用需求比較多，我比較建議使用這兩種組件。

其餘組件對比

從上圖的對比能夠看出，每種組件庫，都有不一樣類型的發展，因此，你們在選擇的時候，也能夠着重參考一下。

比對總結

在目前的時間節點來看，每一種組件庫都已經達到了一個功能完滿的狀態，就算後期更新，也應該只是小幅度的更新。

開發在技術選型的時候，能夠根據本身的需求進行選擇。

本期評測結果，其實也挺出乎個人意外的，每一種組件庫在組件設計選擇上，不盡相同，可是最終的組件總數上，都是差很少的。

✨組件推薦

每一種組件庫，有擁有比較獨特亮眼的組件，這裏，我集中作一下推薦，你們也能夠參考本身的需求來作選擇。

iView - Split 面板分割

對於展現的內容作切割，而且能夠經過拖動的方式修改分割。

連接：www.iviewui.com/components/…

HeyUI - DateFullRangePicker 超級日期範圍控件

超級日期範圍控件算是一個比較實用的功能，基本知足日期範圍選擇的全部需求。

連接：www.heyui.top/component/d…

Element - Calendar 日曆

基礎日曆的展現

連接：element.eleme.io/#/zh-CN/com…

HeyUI - TreePicker 樹選擇器

經過Tree模式的數據，選擇數據。

連接：www.heyui.top/component/p…

Ant Design Vue - TreeSelect 樹選擇器

經過Tree模式的數據，選擇數據。

連接：vue.ant.design/components/…

HeyUI - CategoryPicker 聯動選擇器

選擇聯動關聯的信息。

連接：www.heyui.top/component/o…

Element - Image 圖片

集成圖片展現的全部需求

連接：element.eleme.io/#/zh-CN/com…

HeyUI - ImagePreview 圖片預覽

圖片預覽功能以及圖片列表展現。

連接：www.heyui.top/component/o…

Element - v-loading 加載中

經過指令的方式控制加載中的樣式

連接：element.eleme.io/#/zh-CN/com…

HeyUI - TextEllipsis 超出文本省略

超出多行文本省略功能。

連接：www.heyui.top/component/o…

HeyUI - Clipboard 複製剪切板

複製剪切板集成

連接：www.heyui.top/component/o…