Vue移动端前端框架的选择

vue后台项目web端一般都选用ElementUI,但是移动端的选择还是比较多的。
这里公司由于有少量的移动端页面开发需求(表单类页面),所以查阅了一下当前用的较多的移动端Vue组件库
由于ElementUI和mintUI都是饿了么团队的,所以一开始选择了mintUI。

但是,但是mintUI真是难用啊!!

  • 首先,mintUI的git上的接口文档写的简直?????和ElementUI的官方文档简直没法比,比如picker的文档看了一遍根本是一头雾水
  • 其次,笔者在使用日期选择器datetime picker的时候,发现居然api上没有提供itemHeight的属性,这样的话修改前端样式之后选择方法选出来的数据就会和显示的数据不一致!
  • 然后,默认的field radio和checklist的样式都比较少,而且样式调整起来都比较麻烦
  • 最后再次吐槽一下文档真是的烂

于是查阅了其他平台之后,最后决定推翻页面,删掉mintUI,改成了vant
vant是有赞前端团队提供的基于vue的移动端组件库,目前已经发布最新的是基于vue2的vant2

  • 首先,vant的文档就比mintUI好太多了,这里贴上地址https://youzan.github.io/vant/#/zh-CN/intro 看完了mintUI的文档再看vant的文档真是的如沐春风
  • 其次,组件真的相当丰富,而且datetimePicker和picker都有itemHeight的属性,方便调整
  • 然后,样式比mintUI丰富了很多,也支持直接通过less变量来定制主题,好评!
  • 小问题,field没有类似input的maxlength的属性,希望后期可以加上

vant团队对issue的响应相当及时,之后vue项目移动端都准备采用vant框架了。
引入的话就通过
cnpm来安装

import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

当然也可以按需引入,官方的文档特别全面,这里就不多说了。
有其他更好的控件也欢迎交流!

Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐