Vant

定义

Vant 是一个面向移动端的用户界面组件库，由有赞前端团队开发和维护。^[1] 它把移动端页面中常用的按钮、单元格、表单、弹窗、加载提示、滑动组件等界面元素预先实现并封装，开发者只需按需引入即可复用，无须从零编写样式与交互逻辑。^[2]

Vant 以 Vue 作为主要框架基础，官方同时提供 Vue 2、Vue 3 和微信小程序三个版本，React 版本与支付宝小程序版本则由社区团队维护。^[1] 微信小程序版本通常称为 Vant Weapp，采用小程序原生语法编写。^[4]

原理

Vant 的组件以 Vue 单文件组件形式编写，每个组件把结构、样式和交互逻辑封装为一个可复用的模块，安装后通过注册或按需引入的方式挂载到项目中。^[1] 它不依赖第三方 npm 包，整体代码使用 TypeScript 编写并配有完整类型定义，因此可以在编译阶段进行类型检查。^[1]

为控制打包体积，Vant 支持按需引入与 Tree Shaking，配合自动导入插件后，构建工具只会把实际用到的组件及其样式打进产物，未使用的组件不会进入最终代码。^[2] 组件样式基于 CSS 变量组织，内置 700 多个主题变量，修改变量值即可在应用或页面级别改变配色、圆角等视觉风格，并支持深色模式与国际化语言包。^[1]

发展历程

Vant 由有赞前端团队于 2017 年开源，最初定位为服务有赞核心业务的移动端 Vue 组件库。^[5][3] 2018 年 3 月发布 Vant 1 版本，同年 8 月 11 日发布微信小程序版本的 Vant Weapp 首个版本。^[1][6]

2019 年 6 月发布基于 Vue 2 的 Vant 2，2020 年 12 月发布适配 Vue 3 的 Vant 3，2022 年 11 月前后发布 Vant 4。^[1] 官方文档列出的维护状态为：Vant 4 持续迭代新功能，Vant 3 与 Vant 2 不再增加新功能但处理缺陷，Vant 1 已停止维护。^[1]

应用

Vant 主要用于移动端网页与小程序的前端开发，覆盖电商、零售等需要在手机浏览器或应用内嵌页面中呈现界面的场景。^[2] 有赞自身的核心业务页面即构建在该组件库之上。^[7]

围绕核心库，官方还维护了若干配套项目：Vant Weapp 提供微信小程序组件，Vant Cli 是用于搭建组件库的脚手架工具，Vant Icons 提供图标资源，Vant Touch Emulator 用于在桌面浏览器中模拟触屏以调试组件。^[1] 社区侧则有参照 Vant 实现的 React 组件库、Taro 版本以及支付宝小程序版本等衍生项目。^[1]

局限

Vant 的组件围绕 Vue 生态设计，官方版本不直接支持 React 等其他框架，使用其他框架时需依赖社区维护的移植版本，其更新节奏与官方版本并不同步。^[1] 各主要版本之间存在框架绑定关系，Vant 3 与 Vant 4 面向 Vue 3，Vant 2 面向 Vue 2，跨版本升级需要同步调整项目所依赖的框架版本。^[1]

浏览器支持范围也存在下限：Vant 2 要求现代浏览器以及 Android 4.0 以上、iOS 8.0 以上，Vant 3 与 Vant 4 则要求 Chrome 51 以上、iOS 10.0 以上，与 Vue 3 自身的兼容范围一致。^[1] 此外，早期版本中组件数量相对有限，更多面向电商场景的业务组件并未一并开源。^[8]

参见

• Vue —— Vant 所依托的前端框架，组件库按 Vue 2 与 Vue 3 分版本提供。

• React —— 另一个主流前端框架，其对应版本由社区参照 Vant 维护。

• 微信小程序 —— Vant Weapp 面向的运行环境。

• TypeScript —— Vant 使用的开发语言，用于提供类型定义。

• 有赞 —— 开发和维护 Vant 的公司。