现在的位置: 首页 > web前端 > 正文

vant移动端 Vue 组件库

2020年07月03日 web前端 ⁄ 共 1077字 ⁄ 字号 评论关闭

  Vant是有赞开源的一套基于Vue2.0的Mobile组件库。通过Vant,可以快速搭建出风格统一的页面,提升开发效率。目前已有近50个组件,这些组件被广泛使用于有赞的各个移动端业务中。Vant旨在更快、更简单地开发基于Vue的美观易用的移动站点。


  Vant组件库特性


  组件都是来源于有赞的微商城业务,并且经过有赞业务的检验,更靠谱


  完善详实的中文文档


  专门的设计师团队维护视觉规范,统一而优雅


  支持babel-plugin-import


  单测覆盖率超过90%


  建议搭配webpack,babel使用Vant,这样可以使用webpack提供的丰富插件和个性化配置。Vant支持了babel-plugin-import,通过babel插件使用Vant,可以优化代码体积,提高前端性能。


  安装


  #Usingnpm


  npmivant-S


  #Usingyarn


  yarnaddvant


  使用


  importVuefrom'vue';


  import{Button}from'vant';


  import'vant/lib/index.css';


  Vue.use(Button);


  Vant开发理念


  轻量化


  作为移动端组件库,Vant一直将轻量化作为核心开发理念。为了平衡日益丰富的功能和轻量化之间的矛盾关系,我们尝试了很多的优化方式,包括支持组件按需加载、公共模块复用、组件编译流程优化等。


  在应用一系列的优化手段之后,目前Vant的组件平均体积仅有8.8KB,Uglify+Gzip后约1KB。作为对比,mint-ui的组件平均体积为15.2KB,某些组件库的组件平均体积甚至在25KB以上。


  Vant之所以能保持如此小的组件体积,主要归功于我们独特的组件编译方式。目前主流的组件编译方式是通过webpack搭配vue-loader对每个组件进行编译,为每个组件生成一个打包后JS文件。这样的做法会产生大量的冗余代码,比如webpack内置的模块化代码、vue-loader内置的normalize函数、重复引入的babelhelper等等,而我们不希望在组件的编译结果中引入这些冗余代码。


  总之,一开始我们尝试通过使用rollup和rollup-plugin-vue去解决上述的问题,但很快我们就发现了更为直接的方式,即通过官方提供的vue-template-compiler和babel对组件进行编译,这样的方式简单纯粹,编译出的代码非常干净,细节在此不做赘述,有兴趣的同学可以看下Vant中构建部分的源码。


  

抱歉!评论已关闭.