首先我們聊一聊前端的UI框架,也可以說是組件庫.UI框架種類繁多,舉幾個例子:iView UI,ElementUI,layUI,BootStrap,EasyUI等等.
UI組件庫的優點便是讓程序員不再親自布局頁面樣式,無疑節省了時間和人力成本,但對於Vue框架而言,卻並不是所有的UI組件庫都適合它.
Vue作為目前最火最流行的前端框架之一,自然有它獨特的優點.Vue最大的好處就是前端頁面不必直接操作DOM樹了,而是采用數據的雙向綁定,這樣一來也就釋放了程序員的雙手,讓程序員更多地關注前端業務邏輯本身.而像BootStrap,layUI等組件庫更多的卻是借助於jQuery操作DOM元素來實現的.所以如果我們前端采用的是VUE框架,那么就要選擇與之吻合的UI組件庫,這樣才能達到目的.
同樣,基於Vue的UI組件庫也是不少,比如:iView UI組件庫,Element UI組件庫,Ant Design Vue UI組件庫等等.這里我就簡單介紹三種我接觸過基於Vue的UI組件庫.
1.Element UI
餓了么旗下的一套為開發者、設計師和產品經理准備的基於 Vue 2.0 的桌面端組件庫,組件齊全，基本涵蓋后台所需的所有組件,開源,GitHub上Star44k已經說明了其受歡迎度,應該是當下使用最廣泛的UI組件庫了.
官網：http://element.eleme.io/#/zh-CN
2.Ant Design Vue UI
Ant Design Vue是 Ant Design 3.X 的 Vue 實現，是螞蟻金服推出的一款服務於企業級產品的設計。推薦大的項目使用.
官網：https://vuecomponent.github.io/ant-design-vue/docs/vue/introduce-cn/
3.Vuetify
Vuetify組件庫與前兩者最大的區別就是它是由國外開發.但是卻有着特有的優點:
1)Vuetify幾乎不需要任何CSS代碼，而element-ui許多布局樣式需要我們來編寫;
2)Vuetify基於Material Design（谷歌推出的多平台設計規范），更加美觀，動畫效果酷炫，且風格統一
3)Vuetify從底層構建起來的語義化組件更容易學習記憶
最后,可能有人問,既然Vue的UI組件庫這么多,我們到底該如何選擇呢?
首先小編覺得無論哪個組件庫都有着豐富的組件,如果項目對於頁面布局樣式沒有特殊的要求,基本上都可以實現.不過話說回來,每個組件庫也都有着各自的優缺點,所以至於最終選擇哪一款組件庫,還要取決於我們項目的具體要求.