vuejs ui庫優劣勢分析和選擇？

01-09

現有的：
Desktop ui:
ElementUI iView ...
Mobile ui:
weui vux mint-ui....

以上ui大家用過的，覺得哪個好一些

element VS iview

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

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

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

API風格

打包優化

與設計師友好性

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

element-ui

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

感謝評論區

糾錯

1.Element 有級聯選擇。

2.Element 的 Popover 即 iView 的 Poptip 組件。

3.Tooltip 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 根據官方說明現需要引入 babel-plugin-component 插件做相關配置然後直接在組件目錄註冊全局組件

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

主題

iview

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

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

新建一個.less 文件，先在less文件中引入官方樣式文件然後在此基礎上複寫

方法二：

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

element-ui

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

深度定製主題

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

執行命令初始化得到一個配置文件，修改相關配置經過編譯得到得到相關主題文件再通過babel 插件引入

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

過渡動畫

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

iview 更為中規中矩

對設計人員

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

iview 沒有提供

以上 ...

3月10日補充：

iView 也支持 Vue.js 2.x了

———————————————————————————————————————————

iView - 一套高質量的UI組件庫近期發布了1.0正式版，這裡客觀評價下目前流行的幾個 Vue.js 組件庫：

1.iView：

優點：組件較全（43個），功能豐富，UI 源自 AntDesign，比較美觀，文檔事無巨細，有可視化腳手架 iview/iview-cli: Create an iView project in visual way 方便創建工程。代碼質量高，文件體積相對小。

缺點：目前只支持 Vue 1.x（不過很快就支持2.x了），部分組件有性能問題尚待優化（比如 Table），還沒有提供 Sketch 和 Axure 工具。部分組件的功能還需擴展，比如 Tree 還不支持非同步，Select 還不支持遠程搜索等。

2.Element UI：

優點：支持 Vue 2.x 組件庫里最好的了，常用業務組件全面，功能豐富，有英文文檔，生態齊全，支持 SSR。

缺點：不支持 Vue 1.x，UI 有待升級，缺少一些業務中常用的組件（比如級聯選擇和穿梭框）。部分組件功能有待升級（比如 Slider 不支持雙向）。

3.vue-antd：

早期基於 Vue 1.x 對 AntDesign 的實現，代碼質量較高，不過已不維護。

4.vue-beauty：

也是基於 Vue 1.x 對 AntDesign 的實現，組件較全，代碼質量高。不過有些組件沒有深入開發，比如 Table、日期時間組件（左右都是同月，很難理解）。

Vue的組件庫系列實在太多了，aliqin/atui: A Vue.js 2.0 UI Toolkit for Web 這是我們花了近一年時間打磨的，已經在內部近10個項目中使用，或許樓主可以看看。

vue的UI庫太多了，一句兩句說不清，可以看看他們的參數數據 vue專題 - Awesomes

幾乎都試過，最後選了quasar，太強悍了

https://chenz24.github.io/vue-blu/#/ 推薦使用！Vue-Blu 基於Vue2.x的組件庫

還有muse ui

ElementUI UI風格有待觀摩

mint-ui 用起來還不錯，至今在兩個項目上用到它

iView 還不兼容VUE2.0

iview 兼容2.0的時候，就完美了。

N3 components built with Vue.js 支持 1和 2 ，組件還算全

移動端我推薦muse-ui，就是沒有輪播圖，其他基本完美。PC端的話，iview也很不錯

Vue-material

不建議使用這個庫，最簡單的輸入框都有bug，css也不好

我想，最完美的大概是還沒有正式發布1.0版本的iview。