Vue.js: Element UI 與 Vuetify 比對
1、Element UI（目前版本：2.13.2）
ElementUi官網：Element - 網站快速成型工具
GitHub倉庫：https://github.com/ElemeFE/element
正如官方介紹所說的，Element UI框架組件具有很強的“一致性”特征，默認情況下為淺藍色風格配色，組件標簽用“el-”開頭，通常只需要組合添加幾個組件就能生成比較不錯的設計布局
?? ???? ??
從整體上保持高度一致，很適合快速建站的小伙伴們，代碼不多，只需要簡單的設定屬性以及綁定數據，配合上ElementUi的布局設計，前端實現網站還不分分鐘的事情?，代碼實現相對之前辛苦的寫樣式的確是省事不少。
要說不方便的地方嘛。。。還的確有，某種程度上還有點不好解決，就是屏幕適應的問題。
正常的看這幾個圖還行，但把窗口大小調整后。。。emmm，有點不忍直視了
是吧，這縮放之后就有點尷尬的。所以開始嘗試尋找一款能針對屏幕做適配的Vue框架（大佬可以自己適配，我就是個嫌麻煩的菜雞~~）
2、Vuetify（目前版本：2.3.15）
最新版本v2.3.15官網地址：Vuetify - A Material Design Framework for Vue,js
舊版v2.x官網地址：?Vuetify - A Material Design Framework for Vue,js
GitHub倉庫：https://github.com/vuetifyjs/vuetify
Vuetify 是 Vue.js 的頭號組件庫，自 2016 年以來一直在積極開發。該項目的目標是為用戶提供使用?Material Design specification?構建豐富且引人入勝的 web 應用程序所需的一切。它通過一致的更新周期、對以前版本的長期支持?(LTS)、響應式社區參與、豐富的資源生態系統和對高質量組件的貢獻來實現這一點。
一個尤雨溪大大推薦的框架，使用時的體會簡直就是屏幕適配的最好框架（大概沒有之一吧），放一個效果圖看看就知道了：
這是模擬三種情況下的視圖，分別是PC、平板與手機，三種窗口之間縮放可直接切換
官方制定了五種屏幕適配解決方案
{ ??//?Breakpoints ??xs:?boolean ??sm:?boolean ??md:?boolean ??lg:?boolean ??xl:?boolean ??//?Conditionals ??xsOnly:?boolean ??smOnly:?boolean ??smAndDown:?boolean ??smAndUp:?boolean ??mdOnly:?boolean ??mdAndDown:?boolean ??mdAndUp:?boolean ??lgOnly:?boolean ??lgAndDown:?boolean ??lgAndUp:?boolean ??xlOnly:?boolean ??//?true?if?screen?width?
使用實例如下，使用hidden-?-and-down類可以隱藏某類設備及其像素以下的組件
例如
桌面版AppBar：
手機版AppBar:
3、總結
總得來說，兩種都是非常優秀的框架，一種是餓了么團隊開源的一款統一設計風格快速建站框架，一款是基于MaterialDesign設計理念的一款多分辨率顯示適配的框架，兩者都有其優勢，且側重點都不一樣。ElementUI更側重創建一組風格統一、高效且易于上手的理念，而Vuetify框架講究多平臺適配，與Google設計MaterialDesign設計風格搭配到一起，代碼量會比Element稍微大一些，但對于自己做屏幕分辨率適配還是輕松不少。（啊，對了，最新的Vuetify框架還沒有中文文檔，這一點上自然比不上ElementUI這種本土框架，后期會慢慢適配的，近日想學習Vuetify框架，但英語水平也不是那么好的話，可以進入官網后點擊下圖紅色劃線部分進入舊版文檔）
Element UI JavaScript webpack ECMAScript Vue
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
