Vant组件库

Vant 是一个轻量、可靠的移动端组件库，于 2017 年开源

目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本

特性

• ? 性能极佳，组件平均体积小于 1KB（min+gzip）
• ? 70+ 个高质量组件，覆盖移动端主流场景
• ? 零外部依赖，不依赖三方 npm 包
• ? 使用 TypeScript 编写，提供完整的类型定义
• ? 单元测试覆盖率超过 90%，提供稳定性保障
• ? 提供丰富的中英文文档和组件示例
• ? 提供 Sketch 和 Axure 设计资源
• ? 支持 Vue 2、Vue 3 和微信小程序
• ? 支持主题定制，内置 700+ 个主题变量
• ? 支持按需引入和 Tree Shaking
• ? 支持无障碍访问（持续改进中）
• ? 支持深色模式（从 Vant 4开始支持）
• ? 支持服务器端渲染
• ? 支持国际化，内置 20+ 种语言包

安装

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

xxxxxxxxxx
npm i vant --save

项目中引入Vant

xxxxxxxxxx
import { createApp } from 'vue'
import App from './App.vue'
import { Button } from 'vant';
import 'vant/lib/index.css';

const app = createApp(App)
app.use(Button);
app.mount('#app')

xxxxxxxxxx
<template>
  <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>
</template>
<script setup></script>