# vant-demo

**Repository Path**: vant-contrib/vant-demo

## Basic Information

- **Project Name**: vant-demo
- **Description**: Vant 示例仓库
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: https://vant-contrib.gitee.io/vant/
- **GVP Project**: No

## Statistics

- **Stars**: 30
- **Forks**: 27
- **Created**: 2019-08-12
- **Last Updated**: 2025-06-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vant, Vue, vue3, 组件库, JavaScript

## README

# Vant Demo

[English](./README.md) | 简体中文

当前仓库是 Vant 官方的示例仓库，包含 Vant、Vant Weapp 和 Vant Cli 相关的示例。

## 如何使用

1. 首先，克隆当前仓库到你的本地：

```bash
git clone git@github.com:vant-ui/vant-demo.git
```

2. 然后选择你需要的示例，比如 Vite 项目示例：

```bash
cd vant/vite
```

3. 通过 `npm` 或其他包管理器安装依赖，即可启动项目：

```bash
npm i
npm run dev
```

4. 你可以 Fork 一份当前项目，也可以直接从当前项目拷贝代码来使用。

## 目录结构

```bash
├── vant                # Vant 相关示例
│   ├── vite            使用 Vue 3、Vant 4、Vite 搭建应用
│   ├── nuxt3           使用 Nuxt 3、Vant 4 搭建应用
│   ├── vue3            使用 Vue 3、Vant 4、Vue Cli 搭建应用
│   ├── vue3-ts         使用 Vue 3、Vant 4、TS、Vite 搭建应用
│   ├── cdn             通过 CDN 引入 Vant
│   ├── rem             配置 rem 适配
│   ├── viewport        配置 viewport 配置
│   └── typescript      配置 typescript 按需引入
│
├── vant-weapp          # Vant Weapp 相关示例
│   └── base            使用 Vant Weapp 搭建小程序
│
├── react-vant          # React Vant 相关示例
│   └── modern-js       使用 React Vant、Modern.js、Rspack 搭建应用
│
└── vant-cli            # Vant Cli 相关示例
    └── base            使用 Vant Cli 搭建组件库
```