Vant 中文教程

教程说明:

Vant 是一套轻量、可靠的移动端组件库。通过 Vant,可以快速搭建出风格统一的页面,提升开发效率。

特性

  • 60+ 高质量组件
  • 95% 单元测试覆盖率
  • 完善的中英文文档和示例
  • 支持按需引入
  • 支持主题定制
  • 支持国际化
  • 支持 TS
  • 支持 SSR

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

轻量化

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

在应用一系列的优化手段之后,目前 Vant 的组件平均体积仅有 8.8KB,Uglify + Gzip 后约 1KB。

丰富实用的业务组件

Vant 不只是提供基础的UI组件,为了方便开发者快速构建移动商城,Vant 增加了许多移动商城内常用的业务组件。类似于地址管理、优惠券、省市县选择等


温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }