Vue移动端框架选型之 Vant
前端时间帮友人做了个外卖小应用，经历了痛苦的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：
API文档&示例：
Vant的文档示例有点不走寻常路，其他框架大部分采用组件下方展示示例源码的形式，vant标新立异的采用左右格式，源码和示例的关联对比性大大降低；其二，某些组件命名蜜汁个性，好好的Badge非得改名叫SlidebarItem，最扯的是还不单独列在组件列表里，只能从Slidebar里找到，这脑回路也是醉了；最后有点不爽的是Vant没有提供在线jsfiddle功能；
其他
- 代码简洁程度：Vant胜出。有兴趣的可以看下Muse的列表组件，虽说样式颇为丰富，然而代码结构实在臃肿不堪。
- 内置色彩方案：Muse提供了完整的一套配色方案，并提供了快捷的类名，Vant...约等于没有；
- 内置图标：Muse直接引用了Material 字体图标库，Vant则内置了100来个常用图标。对第三方图标库的支持上，二者方式分表为 Muse： <mu-icon :value="iconfont icon-xxx"> Vant：<icon class="iconfont" class-prefix='icon' name='xxx' />，前者那个冒号有点膈应，后者太过啰嗦，反正都不如element直接在class里加前缀方便。
待续...
Vue移动端框架选型之 Vant相关推荐
- Vue移动端框架的选择
文章目录 Vue移动端前端框架的选择 Vue移动端前端框架的选择 vue后台项目web端一般都选用ElementUI,但是移动端的选择还是比较多的. 这里公司由于有少量的移动端页面开发需求(表单类页面 ...
- uniapp开发实例github_跨端开发痛点？送你一款Vue最流行的跨端框架——uni-app
前言 今天来聊一下前端必备技能--小程序开发. 从最早发布的微信小程序,到后来的支付宝小程序.字节跳动小程序.百度小程序.QQ小程序,还有最近发布的360小程序,面对这么多套的代码,开发者该如何开发呢 ...
- 小程序多端框架全面测评 | 程序员硬核评测
作者 | 凹凸实验室 责编 | 伍杏玲 [CSDN 编者按]最近前端界多端框架频出,各巨头公司纷纷造出各家的轮子,例如滴滴的Chameleon.美团的Mpvue.京东的Taro.DCloud的uni- ...
- 移动端框架搭建以及移动端框架搭建的那些事
移动端框架搭建的那些事(每一项都可以扩展): 1.vue+vue-cli+vue-router+vuex+vux+sass+webpack // 技术选型 // 各个技术的单独使用 (vue 生命周期 ...
- Chameleon跨端框架——壹个理想主义团队的开源作品
文章较长,信息量很大,请耐心阅读,必然有收获.下面正文开始~ 背景 解决方案 原理 久经考验 生产应用举例 易用性好 多态协议 学习成本低 渐进式接入 业内对比 后期规划 理想主义 历经近20个月打磨 ...
- Chameleon跨端框架——一个理想主义团队的开源作品
出品 | 滴滴技术 作者 | 张楠 Conan 前言:历经近20个月打磨,滴滴跨端方案chameleon终于开源了https://github.com/didi/chameleon, 真正专注于一套代 ...
- 响应式移动端框架_简单，响应式，移动优先导航
响应式移动端框架 我们将构建一个简单的响应式网站导航. 我们的解决方案将帮助我们强调页面的内容 ,可以说是设计移动设备时的重中之重. 不会涉及JavaScript,我们将通过Mobile First方 ...
- 基于vue的组织架构树组件_Vue组件基于D3.js布局显示树
基于vue的组织架构树组件 Vue.D3.tree (Vue.D3.tree) Update documentationVue components to display graphics based ...
- 移动端vue实现部门结构功能_基于Vue制作组织架构树组件
编程之家收集整理的这篇文章主要介绍了基于Vue制作组织架构树组件,编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考. 由于公司业务需求,需要开发一个展示组织架构的树组件(公司的项目是基于Vu ...
最新文章
- 985博士：导师是院士，直到毕业，我们都没单独说过一句话
- 内核同步机制——自旋锁
- C#连接oracle的方式以及问题解决.
- 星空主题设计理念_南京婚礼丨一起去看不同经纬度城市的星空吧
- 成功解决ImportError: cannot import name ‘Imputer‘
- 初探swift语言的学习笔记九(OC与Swift混编)
- html代码里面换图片不显示不出来了,微擎 Ueditor 百度编辑器 替换图片不显示问题...
- h系列标签自动加了bold
- WDCP控制面板的常用liunx命令集
- 宝塔apache mysql_宝塔Linux面板命令大全，安装宝塔，Nginx，Apache，MySQL等 - SEO中文网...
- 使用密码字典暴力破解加密rar、zip压缩文件
- 下面哪个对象能代表当前的HTML文件,GD：JAVA考试选择题
- 在 Linux 平台及 IPv4 环境中构建 IPv6 测试环境
- 栋的周评 | 第二回合（定期更新、动态、架构、云技术、后端、前端、收听/收看、英文、哲学、书籍、影视、好歌、新奇）
- Android实现自定义铃音
- Eclipse安装( jdk安装以及环境配置教程 ）
- HTML5期末大作业：个人网站设计——拾艺客个人设计工作室(6个页面) HTML+CSS+JavaScript...
- 爱可生开源mysql_爱可生开源社区官网正式发布啦！
- Machine Learning Basics
- CentOS7中使用yum安装php5.6的方法