360SDN.COM

首页/Vue.js/列表

【前端项目】Vant: 轻量、可靠的移动端 Vue 组件库

来源:李隆隆 FEPulse  2018-04-12 09:23:34    评论:0点击:

Vant 是有赞前端团队维护的移动端 Vue 组件库,提供了一整套 UI 基础组件和业务组件。通过 Vant 可以快速搭建出风格统一的页面,提升开发效率。

 

Vant 具有以下特性:

  • 50+ 个经过有赞线上业务检验的组件。

  • 单元测试覆盖率超过 90%。

  • 完善的中英文文档和示例。

  • 支持 babel-plugin-import。

  • 支持 TypeScript。

  • 支持 SSR(服务器端渲染)。

 

轻量化

Vant 的组件平均体积仅有 8.8KB,Uglify + Gzip 后约 1KB。作为对比,mint-ui 的组件平均体积为 15.2KB。Vant 之所以能保持如此小的组件体积,主要归功于其独特的组件编译方式。目前主流的组件编译方式是通过 webpack 搭配 vue-loader 对每个组件进行编译,为每个组件生成一个打包后 JS 文件。这样的做法会产生大量的冗余代码,比如 webpack 内置的模块化代码、vue-loader 内置的 normalize 函数、重复引入的 babel helper 等等,而 Vant 通过官方提供的 vue-template-compiler 和 babel 对组件进行编译,这样的方式简单纯粹,编译出的代码非常干净,细节在此不做赘述,有兴趣的同学可以看下面“ Vant 中构建部分的源码”。

 

 

生态化

除了丰富的组件外,Vant 也提供以下的生态能力:

  • 基于 vue-cli 的脚手架 vue-cli-template-vant

  • 支持 nuxt 服务器端渲染

  • 支持 Typescript 类型检测

  • 支持 i18n 多语言定制

  • 支持通过 postcss 插件进行主题定制

  • 官方 Demo 仓库 - vant-demo

  • 基于相同视觉规范的小程序组件库 - zanui-weapp

  • 开源社区的移动商城示例项目 - vant--mobile-mall

而且未来 Vant 也会提供 rem 的支持,vscode 代码提示插件等。

 

快速迭代

该项目是由有赞前端团队几十个工程师维护,基本保持一周 1 ~ 2 次的发布节奏,其中 2018 年 3 月 19 日 Vant 发布了 1.0.0 版本,标志着 Vant 逐渐走向成熟,可以进入前端领域实际解决问题。

为您推荐

友情链接 |九搜汽车网 |手机ok生活信息网|ok生活信息网|ok微生活
 Powered by www.360SDN.COM   京ICP备11022651号-4 © 2012-2016 版权