Vant

特点

• 轻量化：每个组件的大小平均为 1KB（min+gzip）。
• 高质量组件：包含 80 多个高质量的组件。
• 零依赖：无第三方依赖。
• 高测试覆盖率：单元测试覆盖率超过 90%。
• TypeScript 支持：完全用 TypeScript 编写。
• 丰富的文档和示例：提供详细的文档和使用示例。
• 设计资源：提供 Sketch 和 Axure 设计资源。
• 多版本支持：支持 Vue 2 和 Vue 3，支持 Nuxt 2 和 Nuxt 3。
• 功能丰富：支持 Tree Shaking、自定义主题、黑暗模式、服务端渲染（SSR）和国际化（i18n），内置 30 多种语言。

使用场景

Vant 适用于各种移动端 web 应用开发，特别是需要响应式设计和触摸优化的场景。它的组件和功能使其非常适合用于创建电商平台、社交媒体应用、内容展示平台等。

安装方式

可以使用 npm、yarn、pnpm 或 bun 来安装 Vant：

# 安装适用于 Vue 3 项目的最新版 Vant
npm i vant

# 安装适用于 Vue 2 项目的 Vant 2
npm i vant@latest-v2

# 使用 yarn 安装
yarn add vant

# 使用 pnpm 安装
pnpm add vant

# 使用 bun 安装
bun add vant

使用示例

快速开始：

import { createApp } from 'vue';
// 1. 引入你需要的组件
import { Button } from 'vant';
// 2. 引入组件样式
import 'vant/lib/index.css';

const app = createApp();
// 3. 注册你需要的组件
app.use(Button);

常用 API 介绍

Button 组件

• 属性：
  • type: 按钮类型（default, primary, success, warning, danger）
  • size: 按钮尺寸（large, normal, small, mini）
  • icon: 按钮图标
  • loading: 是否显示加载状态
  • disabled: 是否禁用按钮
• 事件：
  • click: 点击事件
  • touchstart: 触摸开始事件

Dialog 组件

• 属性：
  • show: 是否显示对话框
  • title: 对话框标题
  • message: 对话框消息内容
  • showCancelButton: 是否显示取消按钮
  • confirmButtonText: 确认按钮文本
  • cancelButtonText: 取消按钮文本
• 方法：
  • alert: 显示警告对话框
  • confirm: 显示确认对话框
  • close: 关闭对话框

官方资料

• GitHub 仓库
• 官方文档
• Vant 在 npm 的页面