下载APP w3cschool-编程狮
返回 首页

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+编程语言教程
取消
确定
目录

开发指南

Vant 介绍
Vant 快速上手
Vant 更新日志
Vant 定制主题
Vant 开发指南
Vant 设计资源
Vant 风格指南
Vant 国际化

基础组件

Vant Button 按钮
Vant Cell 单元格
Vant Icon 图标
Vant Image 图片
Vant Layout 布局
Vant Popup 弹出层
Vant 内置样式

表单组件

Vant Calendar 日历
Vant Checkbox 复选框
Vant DatetimePicker 时间选择
Vant Field 输入框
Vant NumberKeyboard 数字键盘
Vant PasswordInput 密码输入框
Vant Picker 选择器
Vant Radio 单选框
Vant Rate 评分
Vant Search 搜索
Vant Slider 滑块
Vant Stepper 步进器
Vant Switch 开关
Uploader 文件上传

反馈组件

Vant ActionSheet 上拉菜单
Vant Dialog 弹出框
Vant DropdownMenu 下拉菜单
Vant Loading 加载
Vant Notify 消息提示
Vant Overlay 遮罩层
Vant PullRefresh 下拉刷新
Vant SwipeCell 滑动单元格
Vant Toast 轻提示

展示组件

Vant Circle 环形进度条
Vant Collapse 折叠面板
Vant CountDown 倒计时
Vant Divider 分割线
Vant ImagePreview 图片预览
Vant Lazyload 图片懒加载
Vant List 列表
Vant NoticeBar 通知栏
Vant Panel 面板
Vant Progress 进度条
Vant Skeleton 骨架屏
Vant Steps 步骤条
Sticky 粘性布局
Vant Swipe 轮播
Vant Tag 标记

Vant 导航组件

Vant Grid 宫格
Vant IndexBar 索引栏
Vant NavBar 导航栏
Vant Pagination 分页
Vant Sidebar 侧边导航
Vant Tab 标签页
Vant Tabbar 标签栏
Vant TreeSelect 分类选择

Vant 业务组件

Vant AddressEdit 地址编辑
Vant AddressList 地址列表
Vant Area 省市区选择
Vant Card 卡片
Vant Contact 联系人
Vant Coupon 优惠券选择器
Vant GoodsAction 商品导航
Vant SubmitBar 提交订单栏
Vant Sku 商品规格

废弃

Vant SwitchCell 开关单元格

关闭

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; }