Vant 移动端组件库 v3.0.13下载

Vant软件是一套轻量、可靠的移动端组件库，使用该库用户可以能够快速搭建出风格统一的页面，提升开发效率，Vant 能够提供了一套默认主题，同时用户可以能够更加个人喜好对主题进行设置，该软件的CSS命名采用 BEM 的风格，方便使用者覆盖样式，对于需要完全替换主题色或者其他样式，可以能够按照本文档进行主题定制；Vant对内承载了有赞所有核心业务，对外服务十多万开发者，是业界主流的移动端组件库之一，内置消息提示功能，可在页面中间弹出黑色半透明提示，用于消息通知、加载提示、操作结果提示等场景，非常方便实用。

软件功能

能够提供 60 多个高质量组件，覆盖移动端各类场景

性能极佳，组件平均体积不到 1kb（min+gzip）

单元测试覆盖率 90%+，能够提供稳定性保障

完善的中英文文档和示例

支持 Vue 2 & Vue 3

支持按需引入

支持主题定制

支持国际化

支持 TypeScript

支持 SSR

软件特色

　　轻量化

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

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

　　丰富实用的业务组件

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

官方教程

通过 npm 安装

在现有项目中使用 Vant 时，可以能够通过 npm 或 yarn 进行安装：

通过 CDN 安装

使用 Vant 最简单的方法是直接在 html 文件中引入 CDN 链接，之后你可以能够通过全局变量 vant 访问到所有组件。

通过脚手架安装

在新项目中使用 Vant 时，推荐使用 Vue 官方能够提供的脚手架 Vue Cli 创建项目并安装 Vant。

在图形化界面中，点击 依赖 - 安装依赖，然后将 vant 添加到依赖中即可。

示例

示例工程

我们能够提供了丰富的示例工程，通过示例工程你可以能够了解如下内容：

基于 Vue Cli 和 Vant 搭建应用

基于 Nuxt 和 Vant 搭建应用

配置按需引入组件

配置基于 Rem 的适配方案

配置基于 Viewport 的适配方案

配置基于 TypeScript 的工程

配置自定义主题色方案

引入组件

方式一. 自动按需引入组件 (推荐)

babel-plugin-import 软件是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式。

Tips: 如果你在使用 TypeScript，可以能够使用 ts-import-plugin 实现按需引入。

方式二. 手动按需引入组件

在不使用插件的情况下，可以能够手动引入需要的组件。

方式三. 导入所有组件

Vant 支持一次性导入所有组件，引入所有组件会增加代码包体积，因此不推荐这种做法。

Tips: 配置按需引入后，将不允许直接导入所有组件。

常见问题

　 在 HTML 中无法正确渲染组件？

在 HTML 中使用 Vant 组件时，你可能会碰到部分示例代码无法正确渲染的情况，比如下面的用法：

这是因为 HTML 并不支持自闭合的自定义元素，也就是说 这样的语法是不被识别的，使用完整的闭合标签可以能够避免这个问题：

在单文件组件、字符串模板和 JSX 中可以能够使用自闭合的自定义元素，因此不会出现这个问题。

更新内容

v2.12.6

2021-01-26

Feature

Icons: 新增 wechat 图标, 重命名原 wechat 图标为 wechat-pay b3cd8c

Bug Fixes

修复部分地区无法访问 CDN 静态资源的问题 #8000

perf

Sku: 优化图标加载性能 #7992

版权声明：Vant(移动端组件库)所展示的资源内容均来自于第三方用户上传分享，您所下载的资源内容仅供个人学习交流使用，严禁用于商业用途，软件的著作权归原作者所有，如果有侵犯您的权利，请来信告知，我们将及时撤销。

软件下载信息清单：