Vant

Vant是一款轻量、可的移动端Vue组件库，如果你需要开发应用程序就可以添加这款软件配置UI界面，软件提供的组件资源还是很丰富的，提供基的界面按钮组件、图标组件、提示组件、布局组件，提供专业的表单组件，包括开关组件、文件传输、单选框、步进器、历、输入框，使用这些组件就可以快速部署UI界面，为用户编辑主程序界面提供帮助，节约重新设计UI组件的时间，一键导入组件快速部署菜单界面、部署功能界面，满足大部分移动端开发场景需求！

Vant软件功能

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

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

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

完善的中英文文档和示例

支持 Vue 2 & Vue 3

支持按需引入

支持主题定制

支持国际化

支持 TypeScpt

Vant软件特色

组件内容

Form 表单：用于数据录入、校验，支持输入框、单选框、复选框、文件上传等类型。

NumberKeyboard 数字键盘：虚拟数字键盘，可以配合密码输入框组件或自定义的输入框组件使用。

Search 搜索：用于搜索场景的输入框组件。

Notify 消息提示：在页面顶部展示消息提示，支持函数调用和组件调用两种方式。

Circle 环形进度条：圆环形的进度条组件，支持进度渐变动画。

Vant教程

快速上手

介绍

通过本章节你可以了解到 Vant 的安装方法和基本使用姿势。

安装

通过 npm 安装

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

通过 CDN 安装

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

通过脚手架安装

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

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

引入组件

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

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

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

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

方式三. 导入所有组件

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

Button 按钮

介绍

按钮用于触发一个作，如提交表单。

引入

代码演示

按钮类型

按钮支持 deflt、pmary、info、warning、danger 五种类型，默认为 deflt。

朴素按钮

通过 plain 属将按钮设置为朴素按钮，朴素按钮的文字为按钮颜色，背景为白色。

细边框

设置 hairline 属可以展示 0.5px 的细边框。

禁用状态

通过 disabled 属来禁用按钮，禁用状态下按钮不可点击。

加载状态

通过 loading 属设置按钮为加载状态，加载状态下默认会隐藏按钮文字，可以通过 loading-text 设置加载状态下的文字。

按钮形状

通过 square 设置方形按钮，通过 und 设置圆形按钮。

图标按钮

通过 icon 属设置按钮图标，支持 Icon 组件里的所有图标，也可以传入图标 L。

按钮尺寸

支持 large、normal、small、mini 四种尺寸，默认为 normal。

块级元素

按钮在默认情况下为行内块级元素，通过 block 属可以将按钮的元素类型设置为块级元素。

自定义颜色

通过 color 属可以自定义按钮的颜色。

Vant常见问题

在 HTML 中无确渲染组件？

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

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

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