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

软件介绍

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

软件功能

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

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

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

完善的中英文文档和示例

支持Vue2&Vue3

支持按需引入

支持主题定制

支持国际化

支持TypeScript

支持SSR

软件特色

轻量化

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

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

丰富实用的业务组件

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

官方教程

通过npm安装

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

通过CDN安装

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

通过脚手架安装

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

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

示例

示例工程

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

基于VueCli和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-payb3cd8c

BugFixes

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

perf

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

Tags:Vant下载,移动端组件库,源码相关,程序源码