Vue UI 框架對比 element VS iview

element VS  iview

(最近專案UI框架在選型 ，做了個分析， 不帶有任何利益相關）

主要從以下幾個方面來做對比

使用率（npm 平均下載頻率，元件數量，star, issue…)

API風格

打包最佳化

與設計師友好性

1，使用率（npm 平均下載頻率，元件數量，star, issue…)

npm 下載次數及issue

目前明顯未解決bug遺留數量  ,

這個應該跟生態也有關係， 用element 的人多，發現bug 的機率更大，2是iview 裡面有很多issue 寫明是UI元件的問題 但未標明是確切的bug .

以上對比 其實可以看出， element 開發者團隊規模大於iview 團隊，其結果就是 無論是提交程式碼頻率， 釋出版本數量 都比iview 更強！

截止目前 最新元件支援

結論 ，element 生態更好，使用頻率遠超過iview ,element開發團隊實力更強

一些小眾元件上各有所長 整體iview 更豐富（時間軸，載入進度條，氣泡卡片 ，BackTop,圖釘）

API風格

透過使用平率最高的 form  table 日曆  select  等比較兩者

對應程式碼

明顯感覺 iview 的api 更加簡潔，在生成類似表格  下拉框這些較複雜的元件時 ， iview 的方式類似於antdesign , 好處是直接傳資料進去，在內部實現了模板生成，高效 快捷。 而element 則是用到到v-for vue指令結合的方式去生成，批次生成元素。

表格  操作列 自定義渲染的時 ，iview 使用的是 vue的 render 函式， element 直接在template 中插入對應模板

表格分頁都需要 引入分頁元件 配合使用

日曆元件對比

兩者api 總體比較 ，iview 要比element 簡潔許多。 餓了麼更側重於在template裡直接去渲染模板

思想上 個人覺得iview偏向react,    element 更vue

表單校驗 兩者都使用同一款外掛 async-validator  校驗方式一樣

專案最佳化角度

首屏最佳化，第三方元件庫依賴過大 會給首屏載入帶來很大的壓力，一般解決方式是 按需求引入元件

element-ui  根據官方說明 現需要引入外掛 做相關配置 然後直接在元件目錄 註冊全域性元件

iview  按需求載入  這裡感覺官方給的文件不是很詳細

主題

iview

本身提供了一套主題可供選擇，除此之外 自定義主題

方法一（官方推薦，前提條件是使用webpack）:

新建一個.less 檔案 ， 先在less檔案中引入官方樣式檔案 然後在此基礎上覆寫

方法二 ：

官方提供了 自動編譯工具iview-them 來編譯。乾的事情就是 把自定義的樣式和 github倉庫最新的樣式 透過工具生成一個新的樣式檔案。

element-ui

如果只替換顏色 ，可以使用線上編輯顏色， 生成element-ui 主題 直接下載 再引入

深度定製主題

官方提供了 主題生成工具  element-them

執行命令 初始化得到一個配置檔案 ，修改相關配置 經過編譯得到 得到相關主題檔案  再透過babel 外掛引入

雙方都提供了專門的工具用於深度定製主題，綜合比較 iview 更加簡單，element 主題定製需要配合 babel做一些預編譯 ，以及步驟更多 顯得更加複雜

過渡動畫

element 有內建過渡動畫  使得元件的切換變化 更具動感

iview 更為中規中矩

對設計人員

element 提供了 Sketch 和 Axure 工具 對設計人員友好

iview 沒有提供

以上 ...

作者：yangfan0095
連結：