Vue UI框架對比:Element UI、Ant Design Vue、iView

1. 對比

image.png

2. 資源

  • Element UI

文檔:https://element.eleme.io/#/zh-CN/component/installation
vue-element-admin預(yù)覽:https://panjiachen.github.io/vue-element-admin/#/login
vue-element-admin項目文檔:https://panjiachen.github.io/vue-element-admin-site/zh/
vue-element-admin項目源碼:https://github.com/PanJiaChen/vue-element-admin

  • Ant Design Vue

文檔:https://vue.ant.design/docs/vue/introduce-cn/
Ant Design Pro預(yù)覽:https://preview.pro.ant.design/dashboard/analysis
Ant Design Pro項目文檔:https://pro.ant.design/zh-CN/
Ant Design Pro項目源碼:https://github.com/sendya/ant-design-pro-vue

  • iView

文檔:https://www.iviewui.com/docs/introduce
iView-admin預(yù)覽:https://admin.iviewui.com/login
iView-admin項目文檔:https://lison16.github.io/iview-admin-doc/#/
iView-admin項目源碼:https://github.com/iview/iview-admin

<meta charset="utf-8">

個人感受

從**體驗**上來看:

我更加傾向于elementUI, UI上更加漂亮,使用起來更加容易上手。
一開始,我最新接觸的就是elementUI,感覺elementUI這個框架更加適合于面向外部開發(fā)。

而作為對比的Ant Design,也有一定的優(yōu)勢。
從功能上來講,后者更加齊全。比如回到頂部組件:樹形選擇:<a-tree-select />Ant Design更加適合管理平臺的開發(fā)。

從**實用**上來看:

對于pro版本,vue-element-admin允許初始化基礎(chǔ)版,而ant-design-pro這個初始化后有大量的例子,開發(fā)之前還得把例子刪掉,這點感覺不太好。
總之,兩個框架的pro版本做的都非常棒,但個人更加傾向于ant-design,畢竟組件多占有非常大的優(yōu)勢。

總之:

如果是想快速上手,又希望ui更加漂亮,建議用elementUI;如追求的是比較復(fù)雜的后臺管理平臺,可以考慮采用ant-design-pro,而且ant-design-pro無論表格還是表單,都是高度可配置化的。這點相對于elementUI來說,ant-design-pro雖然稍微復(fù)雜了點,但是換來更大的便利。

一些建議和經(jīng)驗

以下代碼部分都是vue,不涉及react

1. elementUI的菜單組件<el-dropdown>在手機端點擊會回彈的問題

修改triggerclick的方式,因為默認hover時,手機上并不能有很好的體驗。

2. elementUI如何實現(xiàn)通用表單的配置

采用form-create這個庫可以很方便的實現(xiàn)表單完全的json配置

主頁:http://www.form-create.com/
git地址:https://github.com/xaboy/form-create

另外還有一種方式,就是利用Vue的插槽實現(xiàn),這種方式也適合ant-design的可配置表單的實現(xiàn)。

ps: 注意插槽名稱不要帶數(shù)字,最好不要

三個對比(征求各大網(wǎng)站信息)

elementUI

外賣餓了么推出的github 的star是44.1K,關(guān)注度是足夠的,當(dāng)前推出的版本2.13.0,組件數(shù)量大概54個吧,最近時間是2019年11月26日,有團隊不停地維護,單元測試覆蓋率在81%

ant design vue

社區(qū)主導(dǎo)和螞蟻金服技術(shù)支持,ant-design-vue官網(wǎng),github的star是9.5k,組件數(shù)量有57個,最近的更新時間是2020-3-8,有團隊不停地維護,單元測試覆蓋率是87%,只是組件上面功能不是很完善,例如表格的拖動,可以看看issue上面的,可能更多的時間在維護react的antDesign吧

iview
--lll,這個不想說了,有點坑

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

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

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