前端時間幫友人做了個外賣小應用，經歷了痛苦的ui框架選型，最終從最初選定的museui轉投有贊vant，以下是個人總結：
vant提供了sku、省市選擇器等極具實用價值的業務元件，這點必須點個大寫的贊，其他框架鮮有把元件封裝到業務級別的；
vant提供了一些看似冷門（其他框架較少提供）但是實際很常用的元件，如noticebar通知欄、countdown倒計時、skeleton骨架屏等；相比之下，muse有而vant無的元件，例如chip、datatable，前者有點雞肋，反正我是沒有發現特別貼合的使用場景，至於後者對於移動端元件庫來講也並非必須。況且muse的datatable在某些瀏覽器下還有顯示效果的問題，這就比較尷尬了。
這個必須單拎出來表揚下，vant的下拉重新整理元件是我用過的最順滑、最方便的，沒有之一。相比之下muse的下拉重新整理元件在配合稍複雜的子元件使用時，各種卡頓甚至卡死問題層出不窮，一度令人絕望。（江湖上不少相關的第三方外掛程式，如betterscorll、mescroll等也都有類似的卡頓問題，在safari上尤其突出）如果你已經採用了其他家的框架，唯獨缺少下拉重新整理，不妨單獨引入vant的pullrefresh和list來代替；
元件美觀度，個人傾向於vant，原因是vant更貼合移動端風格。就拿最簡單的文字輸入框來說，vant的field更像是原生輸入框，muse則只提供了下劃線風格的輸入框，並且標籤位置、錯誤文字的位置安排實在有點非主流，用在移動端有點不倫不類的感覺；以下是畫風對比：
**簡潔程度：vant勝出。有興趣的可以看下muse的列表元件，雖說樣式頗為豐富，然而**結構實在臃腫不堪。
內建色彩方案：muse提供了完整的一套配色方案，並提供了快捷的類名，vant...約等於沒有；
內建圖示：muse直接引用了material 字型圖示庫，vant則內建了100來個常用圖示。對第三方圖示庫的支援上，二者方式分表為 muse： vant：，前者那個冒號有點膈應，後者太過囉嗦，反正都不如element直接在class裡加字首方便。
待續...
vue 移動端適配vant
下面我們分別將這兩個工具配置到專案中完成 rem 適配。一 使用 lib flexible 動態設定 rem 基準值 html 標籤的字型大小 1 安裝 npm i amfe flexible2 然後在 main.js 中載入執行該模組 import amfe flexible 二 使用 postc...
vue移動端專案vant元件庫之image
main.js import from vant vue.use lazyload 頁面路由元件 pd30 h3 style width 160px height 110px src h3 width 100 height 100 src h3 width 100 height 100 fit co...
vue2 x移動端ui框架選型
最近公司準備做移動端spa專案，需要選乙個ui框架。優先考慮谷歌material design設計風格。針對市面上的框架進行了一次調研，簡單總結如下。選型原則 1.優先考慮md風格。2.github的star數量5k以上。3.高可靠性，以及持續維護。muse ui star 7k。個人維護。移動端和...