Vue移动端框架选型之 Vant

前端时间帮友人做了个外卖小应用，经历了痛苦的UI框架选型，最终从最初选定的MuseUI转投有赞Vant，以下是个人总结：

• 组件实用性

1. Vant提供了SKU、省市选择器等极具实用价值的业务组件，这点必须点个大写的赞，其他框架鲜有把组件封装到业务级别的；
2. Vant提供了一些看似冷门（其他框架较少提供）但是实际很常用的组件，如NoticeBar通知栏、CountDown倒计时、Skeleton骨架屏等；相比之下，Muse有而Vant无的组件，例如Chip、DataTable，前者有点鸡肋，反正我是没有发现特别贴合的使用场景，至于后者对于移动端组件库来讲也并非必须。况且Muse的DataTable在某些浏览器下还有显示效果的问题，这就比较尴尬了。
3. 这个必须单拎出来表扬下，Vant的下拉刷新组件是我用过的最顺滑、最方便的，没有之一。相比之下muse的下拉刷新组件在配合稍复杂的子组件使用时，各种卡顿甚至卡死问题层出不穷，一度令人绝望。（江湖上不少相关的第三方插件，如BetterScorll、MeScroll等也都有类似的卡顿问题，在safari上尤其突出）如果你已经采用了其他家的框架，唯独缺少下拉刷新，不妨单独引入Vant的PullRefresh和List来代替；
4. 组件美观度，个人倾向于Vant，原因是Vant更贴合移动端风格。就拿最简单的文本输入框来说，Vant的Field更像是原生输入框，Muse则只提供了下划线风格的输入框，并且标签位置、错误文字的位置安排实在有点非主流，用在移动端有点不伦不类的感觉；以下是画风对比：

Vant：

Muse：

• API文档&示例：

Vant的文档示例有点不走寻常路，其他框架大部分采用组件下方展示示例源码的形式，vant标新立异的采用左右格式，源码和示例的关联对比性大大降低；其二，某些组件命名蜜汁个性，好好的Badge非得改名叫SlidebarItem，最扯的是还不单独列在组件列表里，只能从Slidebar里找到，这脑回路也是醉了；最后有点不爽的是Vant没有提供在线jsfiddle功能；

• 其他

1. 代码简洁程度：Vant胜出。有兴趣的可以看下Muse的列表组件，虽说样式颇为丰富，然而代码结构实在臃肿不堪。
2. 内置色彩方案：Muse提供了完整的一套配色方案，并提供了快捷的类名，Vant...约等于没有；
3. 内置图标：Muse直接引用了Material 字体图标库，Vant则内置了100来个常用图标。对第三方图标库的支持上，二者方式分表为 Muse： <mu-icon :value="iconfont icon-xxx">  Vant：<icon class="iconfont" class-prefix='icon' name='xxx' />，前者那个冒号有点膈应，后者太过啰嗦，反正都不如element直接在class里加前缀方便。

待续...