移动端组件库vant

Vant 是一个轻量、可靠的移动端组件库

特点：

• 🚀 性能极佳，组件平均体积小于 1KB（min+gzip）
• 🚀 70+ 个高质量组件，覆盖移动端主流场景
• 💪 使用 TypeScript 编写，提供完整的类型定义
• 💪 单元测试覆盖率超过 90%，提供稳定性保障
• 🍭 支持 Vue 2、Vue 3 和微信小程序
• 🍭 支持按需引入和 Tree Shaking
• 🍭 支持服务器端渲染（SSR）

---

一、快速上手vant组件库

方式一：自动按需导入

1、安装插件

• 安装babel-plugin-import

2、进行配置

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

方式三：导入所有组件

---

二、使用vant组件库里面的组件

1. 通过以下方式来全局注册组件

import { createApp } from 'vue';
import { Button } from 'vant';

const app = createApp();
app.use(Button);

2. 直接使用

按钮类型：按钮支持 default、primary、success、warning、danger 五种类型，默认为 default。

<van-button type="primary">主要按钮</van-button>
<van-button type="success">成功按钮</van-button>
<van-button type="default">默认按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>

3. 效果展示