Vant 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
Vant 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
Vant 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」 !
Vant 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」「最积极运营项目」 !
Vant 获得 2020 年度 OSC 中国开源项目评选「最积极运营项目」 !
授权协议 MIT
操作系统 跨平台
软件类型 开源软件
所属分类 程序开发UI组件库
开源组织
地区 国产
投 递 者 王练
适用人群 未知
收录时间 2017-09-29

软件简介

Vant 是有赞前端团队开源的移动端组件库,于 2016 年开源,已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务,对外服务十多万开发者,是业界主流的移动端组件库之一。

目前 Vant 官方提供了 Vue 版本微信小程序版本,并由社区团队维护 React 版本

特性

  • 60+ 高质量组件,覆盖移动端各类场景
  • 90%+ 单元测试覆盖率,提供稳定性保障
  • 完善的中英文文档和示例
  • 支持按需引入
  • 支持主题定制
  • 支持国际化
  • 支持 TS
  • 支持 SSR

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

轻量化

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

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

丰富实用的业务组件

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

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (37)

加载中
01/03 11:28
回复
举报
01/14 16:32
回复
举报
打分: 力荐
6
2020/12/24 18:06
回复
举报
6
2020/12/03 14:47
回复
举报
作为一名后端开发,移动端我钟爱vant,pc钟爱element
2020/11/10 21:31
回复
举报
可叹我轮子再多也超不好一辆车,你们继续!
2020/10/23 16:56
回复
举报
打分: 力荐
vant 为什么最近这么火?懂的来说说
2020/09/12 14:43
回复
举报
不知道是不是小程序用的人多呢? 之前我也换过好几个小程序的主件,最后觉得vant的好看点,不知道这个算不算```
2020/12/24 09:57
回复
举报
日历组件当设置最小值及选中值时应展示选中的日期,望采纳
2020/01/06 12:56
回复
举报
为什么SwipeCell左滑可以,右滑失效了?
2019/12/05 15:06
回复
举报
希望增加一个日历控件
2019/09/11 16:44
回复
举报

引用来自“蒲池幸子”的评论

写惯jquery了,再去写vue好别扭啊

引用来自“委员长618”的评论

确实是这样,但是前端近几年发展太迅速,不得不加快学习的脚步了。
说得好像后台没有发展一样 你看JDK今年9月要出13了 靠 太快了
2019/03/06 10:16
回复
举报
go版本帝了解一下。可我还是javaer
2019/08/30 14:09
回复
举报
说得好像后台没有发展一样 你看JDK今年9月已经出15了 靠 太快了
2020/09/21 11:26
回复
举报
更多评论
2020/12/23 14:29

Vant 3.0 正式发布:全面拥抱 Vue 3

历经八个月时长的开发,Vant 3.0 现已正式发布。官方表示,在本次迭代中,其主要工作是基于 Vue 3 重构整个代码仓库和周边生态,并发布 Vant 3.0、Vant Cli 3.0 和 Vant Use 1.0。 具体更新内容如下: 全面拥抱 Vue 3 Vue 3 带来了许多新特性,比如 Composition API、emits Option 和 Teleport。Vant 3.0 全面拥抱了 Vue 3 带来的各种变化,完成下列改造: 使用 Composition API 重构所有组件 使用 Composition API 重写所有文档...

14
24
发表于大前端专区
2020/12/01 08:24

Vant 2.11.1 发布,基于 Vue 的移动组件库

Vant 2.11.1 发布了。Vant 是有赞开源的一套基于 Vue 的移动组件库。Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本,并由社区团队维护 React 版本。通过 Vant,可以快速搭建出风格统一的页面,提升开发效率。Vant 目前已有 60 多个组件,广泛使用于有赞的各个移动端业务中。 本次更新包括: Feature CheckboxGroup: toggleAll 方法新增 skipDisabled 选项,用于跳过禁用的复选框 #7644 DatetimePicker: 支持 Picker...

1
9
发表于大前端专区
2019/06/14 07:21

Vant 2.0.0 发布,基于 Vue 2.0 的移动组件库

Vant 2.0.0 发布了。Vant 是有赞开源的一套基于 Vue 2.0 的移动组件库。通过 Vant,可以快速搭建出风格统一的页面,提升开发效率。目前已有近 50 个组件,这些组件被广泛使用于有赞的各个移动端业务中。 此版本引入了社区呼声最高的四个组件: Image图片组件 Skeleton骨架屏组件 IndexBar、IndexAnchor索引栏组件 DropdownMenu、DropdownItem下拉菜单组件 从 2.0 版本开始,Vant 中的所有组件都支持通过 Less 变量进行样式定制。...

15
17
发表于大前端专区
2019/06/06 07:04

Vant 1.6.22 发布,轻量级移动端 Vue 组件库

Vant 1.6.22 发布了。Vant 是有赞开源的一套基于 Vue 2.0 的 Mobile 组件库。通过 Vant,可以快速搭建出风格统一的页面,提升开发效率。目前已有近 50 个组件,这些组件被广泛使用于有赞的各个移动端业务中。 新版更新内容如下: 修复 Icon 不支持传入本地图片的问题 修复 Area 动态设置 columns-num 时渲染错误的问题 修复 AddressList select 事件触发两次的问题 更新日志 下载地址: Source code(zip) Source code(tar.gz)...

4
8
发表于大前端专区
2019/05/14 06:56

Vant 1.6.18 发布,轻量级移动端 Vue 组件库

Vant 1.6.18 发布了。Vant 是有赞开源的一套基于 Vue 2.0 的 Mobile 组件库。通过 Vant,可以快速搭建出风格统一的页面,提升开发效率。目前已有近 50 个组件,这些组件被广泛使用于有赞的各个移动端业务中。 新版是 Bug 修复版本,更新内容如下: 移除 AddressEdit 中部分冗余样式 修复 Radio 点击事件未冒泡的问题 修复 Checkbox 点击事件未冒泡的问题 修复 PullRefresh 静止情况下存在 transform 样式的问题 #3258 修复 Prog...

4
10
发表于大前端专区
2019/05/06 06:57

Vant 1.6.17 发布,轻量级移动端 Vue 组件库

Vant 1.6.17 发布了。Vant 是有赞开源的一套基于 Vue 2.0 的 Mobile 组件库。通过 Vant,可以快速搭建出风格统一的页面,提升开发效率。目前已有近 50 个组件,这些组件被广泛使用于有赞的各个移动端业务中。 新版更新内容如下: 改进 List: 新增 direction 属性 #3223 Cell: 新增 title-style 属性 #3233 Field: 新增 label-width 属性 #3235 Bug 修复 修复 Card 图片未居中的问题 #3229 修复 Icon new、question 图标展示不全...

0
8
发表于大前端专区
2019/04/27 07:14

Vant 1.6.16 发布,有赞轻量级移动端 Vue 组件库

Vant 1.6.16 发布了。Vant 是有赞开源的一套基于 Vue 2.0 的 Mobile 组件库。通过 Vant,可以快速搭建出风格统一的页面,提升开发效率。目前已有近 50 个组件,这些组件被广泛使用于有赞的各个移动端业务中。 新版更新内容如下: Improvements Step: 新增 active-icon 插槽 #3193 NumberKeyboard: 新增 title-left 插槽 #3194 Icon: 更新 new、hot 图标 #3203 Bug 修复 修复 Field 在 iOS12 上滚动位置偏移的问题 #3204 修复 Ro...

0
7
发表于大前端专区
2019/04/25 07:08

Vant 1.6.15 发布,有赞轻量级移动端 Vue 组件库

Vant 1.6.15 发布了。Vant 是有赞开源的一套基于 Vue 2.0 的 Mobile 组件库。通过 Vant,可以快速搭建出风格统一的页面,提升开发效率。目前已有近 50 个组件,这些组件被广泛使用于有赞的各个移动端业务中。 新版更新内容如下: Improvements Card: 新增多个 Less 变量 #3167 Swipe: 新增多个 Less 变量 #3169 Field: 新增多个 Less 变量 #3168 ImagePreview: 支持组件调用 #3154 ImagePreview: 新增 index 插槽 #3157 ImageP...

2
10
发表于大前端专区
2019/04/08 06:28

Vant 1.6.13 发布,有赞轻量级移动端 Vue 组件库

Vant 1.6.13 发布了。Vant 是有赞开源的一套基于 Vue 2.0 的 Mobile 组件库。通过 Vant,可以快速搭建出风格统一的页面,提升开发效率。目前已有近 50 个组件,这些组件被广泛使用于有赞的各个移动端业务中。 新版更新内容如下: Improvements Uploader: 新增 name 属性 #3096 Slider: 新增 vertical 属性 #3078 Stepper: 新增 input-width 属性 #3076 Tag: 新增多个 Less 变量 #3087 Button: 新增多个 Less 变量 #3093 CellGr...

1
8
发表于大前端专区
2019/03/24 06:53

Vant 1.6.11 发布,有赞轻量级移动端 Vue 组件库

Vant 1.6.11 发布了。Vant 是有赞开源的一套基于 Vue 2.0 的 Mobile 组件库。通过 Vant,可以快速搭建出风格统一的页面,提升开发效率。目前已有近 50 个组件,这些组件被广泛使用于有赞的各个移动端业务中。 新版更新内容如下: Improvements Icon: 更新店铺相关图标 #3044 Radio: 新增 click 事件 #2990 Checkbox: 新增 click 事件 #2990 Button: 新增 hairline 属性 #3031 Button: 新增 touchstart 属性 #3039 Dialog: 新增 ...

0
12
发表于大前端专区
2019/03/06 07:03

Vant 1.6.8 发布,有赞轻量级移动端 Vue 组件库

Vant 1.6.8 发布了,Vant 是有赞开源的一套基于 Vue 2.0 的 Mobile 组件库。通过 Vant,可以快速搭建出风格统一的页面,提升开发效率。目前已有近 50 个组件,这些组件被广泛使用于有赞的各个移动端业务中。 新版更新内容如下: Improvements CouponList: 优化列表为空的样式 #2878 支持在函数式组件上使用 ref 属性 #2863 Bug Fixes 修复 Field label 插槽未生效的问题 #2872 修复 Icon new 图标无法展示的问题 #2887 修复 Ad...

7
8
发表于大前端专区
2019/02/25 07:12

vant 1.6.6 发布,轻量级移动端 Vue 组件库

vant 1.6.6 已发布。Vant 是有赞开源的一套基于 Vue 2.0 的 Mobile 组件库。通过 Vant,可以快速搭建出风格统一的页面,提升开发效率。目前已有近 50 个组件,这些组件被广泛使用于有赞的各个移动端业务中。 新版更新内容如下: Improvements Button: 新增 info 类型 #2831 Picker: 新增 title 插槽 #2811 Tab: 新增 lazy-render 属性 #2800 Tab: 新增 nav-left、nav-right 插槽 #2828 PasswordInput: 新增 mask 属性 #2796 St...

4
11
发表于大前端专区
2019/02/11 07:10

vant 1.6.2 发布,轻量级移动端 Vue 组件库

vant 1.6.2 已发布。Vant 是有赞开源的一套基于 Vue 2.0 的 Mobile 组件库。通过 Vant,可以快速搭建出风格统一的页面,提升开发效率。目前已有近 50 个组件,这些组件被广泛使用于有赞的各个移动端业务中。 新版更新内容如下: Improvements Tag: 新增 click 事件 #2693 Swipe: 新增 click 事件 #2690 NoticeBar: 新增 close 事件 #2692 PullRefresh: 新增 success-text、success-duration 属性 #2709 针对 Vue 2.6 优化插槽渲...

2
13
发表于大前端专区
2019/02/06 07:10

vant 1.6.1 发布,轻量级移动端 Vue 组件库

vant 1.6.1 已发布。Vant 是有赞开源的一套基于 Vue 2.0 的 Mobile 组件库。通过 Vant,可以快速搭建出风格统一的页面,提升开发效率。目前已有近 50 个组件,这些组件被广泛使用于有赞的各个移动端业务中。 vant 1.6.1 主要是进行了 Bug 的修复,更新内容如下: [Bug 修复] 功能组件继承上下文 (#2686) 发布公告 下载地址: Source code(zip) Source code(tar.gz)...

0
10
发表于大前端专区
2019/02/05 07:26

Vant 1.6.0 发布,轻量级移动端 Vue 组件库

Vant 1.6.0 已发布,更新内容如下: 值得注意的变化 Radio: 重写了组件结构,现在提供和 Checkbox 一致的 UI 和 DOM 结构 #2651 优化 使用 JSX 重写了所有组件 部分组件现在是函数式组件了,渲染性能更佳 Card: 新增 tag 插槽 #2636 Radio: 新增 icon 插槽 #2651 Radio: 新增 shape 属性 #2651 Icon: 新增 weapp-nav 图标 #2682 Toast: 新增 className 属性 #2680 Notify: 新增 className 属性 #2681 Popup: 新增 open/close 事...

5
4
发表于大前端专区
2019/01/24 07:10

Vant 1.5.6 发布,轻量级移动端 Vue 组件库

Vant 1.5.6 已发布,更新内容如下: 优化 Card: 新增 origin-price slot #2588 Switch: 新增 active-value、inactive-value 属性 #2590 SwitchCell: 新增 active-value、inactive-value 属性 #2591 Bug 修复 修复 Card centered 属性不生效的问题 #2589 修复 Icon name 属性传入 URL 不生效的问题 #2585 更新日志...

0
4
发表于大前端专区
2019/01/06 07:34

Vant 0.5.0 发布,轻量级移动端 Vue 组件库

Breaking changes 在 0.5.0 版本中,我们统一图标规范并重绘了所有图标,同时增加约 100 个新图标。对于同一个图标,我们会提供实底和线框两种风格,以星星图标为例,star表示实底风格的星星,star-o表示线框风格的星星。 同时我们也对原有图标做了一定调整,具体改动如下: 移除 edit-data 移除 pending-deliver 移除 pending-evaluate 移除 points-mall 移除 exchange-record 重命名 warn 为 info 重命名 check 为 circle 重命...

2
7
发表于大前端专区
2018/12/23 07:58

Vant 1.5.0 发布,轻量级移动端 Vue 组件库

Vant 1.5.0 已发布,更新内容如下: Breaking changes 1.5.0 版本统一图标规范并重绘了所有图标,同时增加约 100 个新图标。对于同一个图标,会提供实底和线框两种风格,以星星图标为例,star表示实底风格的星星,star-o表示线框风格的星星。 同时也对原有图标做了一定调整,具体改动如下: 移除 edit-data 移除 pending-deliver 移除 pending-evaluate 移除 points-mall 移除 exchange-record 重命名 warn 为 info 重命名 chec...

0
15
发表于大前端专区
2018/12/06 07:28

Vant 1.4.8 发布,轻量级移动端 Vue 组件库

Vant 1.4.8 已发布,更新内容如下: Improvements Sku: 新增 hide-quota-text 属性 #2216 ImagePreview: 新增 asyncClose 属性 #2198 ImagePreview: 新增 onClose 回调参数 #2197 ImagePreview: 新增淡入淡出动画效果 #2196 Bug Fixes 修复 Notify TS 类型定义错误 #2210 修复 Dialog 通过函数调用时默认值错误 #2208 修复 ImagePreview 指示器颜色错误 #2187 Vant 是一个轻量、可靠的移动端 Vue 组件库,特性如下: 50+ 个经过...

0
4
发表于大前端专区
2018/11/29 07:16

Vant 1.4.7 发布,轻量级移动端 Vue 组件库

Vant 1.4.7 已发布,更新内容如下: Improvements 新增 Notify 消息通知组件 #2135 Cell: 新增 title-class、value-class、label-class 属性 #2138 Icon: 增加更多基础图标 #2159 #2169 Icon: 支持传入图片链接作为图标展示 #2149 List: 新增 finished-text 属性 #2131 Rate: 新增 icon、void-icon 属性 #2148 NavBar: 新增 border 属性 #2143 Style: 新增多个内置 transition 动画 #2163 CouponCell: 移除了默认外边框 #2145 ...

2
7
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
发表了博客
2019/12/12 16:01

vant

vant的特性: 60+ 高质量组件 95% 单元测试覆盖率 完善的中英文文档和示例 支持按需引入 支持主题定制 支持国际化 支持 TS 支持 SSR vant 在 vue中引入 # 通过 npm 安装 npm i vant -S 在main.js引入 import Vant from 'vant'; import 'vant/lib/index.css'; Vue.use(Vant); vant主要是vue中的移动端 下面我们来演示一下在vue移动端中点击按钮显示遮罩层 在遮罩层中显示DatetimePicker 时间选择 如图所示 在temolate中写入butto...

0
0
发表了博客
2019/06/22 17:11

Vant入门

Vant是什么 简介 Vant是有赞开源的一套基于Vue2.0的Mobile组件库。通过Vant,可以快速搭建出风格统一的页面,提升开发效率。目前已有近50个组件,这些组件被广泛使用于有赞的各个移动端业务中。Vant旨在更快、更简单地开发基于Vue的美观易用的移动站点。特性组件都是来源于有赞的微商城业务,并且经过有赞业务的检验,更靠谱完善详实的中文文档专门的设计师团队维护视觉规范,统一而优雅支持babel-plugin-import单测覆盖率超过90%建议...

0
0
发表了博客
2019/08/28 18:15

Vant ui

轻量、可靠的移动端 Vue 组件库 https://youzan.github.io/vant/#/zh-CN/intro postcss-pxtorem vue:将px转化为rem,适配移动端vant-UI等框架 https://www.jianshu.com/p/220a186cc033 DatetimePicker时间选择器 https://www.jianshu.com/p/9daed4a96f63 vant ui 开始时间-结束时间 选择器 https://segmentfault.com/a/1190000021052209?utm_source=tag-newest dialog弹出框的理解 组件化调用 HTML <van-button type=“info” ...

0
0
发表了博客
2020/11/26 16:46

Vant的安装和用法

Vant安装和用法 Vant ( ˈvænt ) 是有赞前端团队基于有赞统一的规范实现的 Vue 组件库,提供了一整套 UI 基础组件和业务组件。通过 Vant,可以快速搭建出风格统一的页面,提升开发效率。目前已有近50个组件,这些组件被广泛使用于有赞的各个移动端业务中。如果你需要开发一个移动商城,用 Vant 就再合适不过了。 中文文档链接:https://www.youzanyun.com/zanui/vant#/zh-CN/intro 安装Vant npm i vant -S:这是简写形式。 np...

0
0
发表了博客
2020/03/30 02:03

Vant 的引入及使用

因为我们项目就是在vue-cli3.x的基础上进行的一个能力的补充,新的脚手架生成的项目如何引入vant,简单的说一下。 项目地址:https://github.com/Ewall1106/mall 安装 如果你是老的脚手架(vue-cli2.x)搭建的vue项目,如何引入使用vant可以看看这个-->有赞 vant 组件库的引入; 新的脚手架引入 vant 也很简单,我们先安装一下: $ npm install vant --save 因为我们的项目中本来是使用sass来作为 css 的一个预编译器的,但是 ...

0
0
发表了博客
2018/03/06 17:24

Vant UI 安装

一:安装 npm i vant -S 二、引入组件(共有三个方法)   方法一:使用 babel-plugin-import (推荐)   1、 安装 babel-plugin-import 插件 npm i babel-plugin-import -D 2、 在 .babelrc 或 babel-loader 中添加插件配置 请覆盖原先代码否则会报错 { "plugins": [ ["import", { "libraryName": "vant", "style": true }] ] }  3、在代码中引入Vant组件,插件会自动将代码转化为方式二中的按需引入形式。 impo...

0
0
发表于大前端专区
2020/05/28 00:44

vant国际化i18n问题

## vant国际化i18n问题 ### 先安装vue-i18n依赖 ``` npm i vue-i18n -s ``` ### 创建多语言文件夹lang ``` // 创建en-US.js文件 export default { app: { hello: 'Hello,World!', name:'zhongTie' } } ``` ``` // 创建zh-CN.js文件 export default { app: { hello: '你好,世界!', name: '中铁', } } ``` ``` // 创建index.js import Vue from 'vue' import VueI18n from 'vue-i18n' import {Locale} from 'vant' // 英文 im...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
2019/01/22 11:02

vue使用ts后,按需加载一直报错

请提供一下vue在ts模式下怎么按需加载Vant的文档

1
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
37 评论
797 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部