Vant 4 快速上手：安装、配置与第一个组件 Demo

为什么选 Vant？

在移动端 Vue 组件库中，Vant 几乎是绕不开的选择。原因很简单：

• 轻量：按需引入，Tree-Shaking 友好，首屏体积可控
• 成熟：有赞数百个业务项目验证，组件稳定
• 丰富：60+ 组件，覆盖 90% 移动端场景
• 可定制：基于 CSS 变量的主题定制，深浅色一键切换

安装

推荐使用 Vite + npm 的方式创建项目：

# 创建 Vite Vue 3 项目
npm create vite@latest my-vant-app -- --template vue
cd my-vant-app

# 安装 Vant 4
npm install vant

# 按需引入插件（推荐）
npm install unplugin-vue-components -D

配置按需引入

在 vite.config.js 中添加自动按需引入插件：

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import Components from "unplugin-vue-components/vite";
import { VantResolver } from "unplugin-vue-components/resolvers";

export default defineConfig({
  plugins: [
    vue(),
    // 自动按需引入 Vant 组件
    Components({ resolvers: [VantResolver()] }),
  ],
});

配置完成后，在模板中直接写 van-button，Vite 会自动引入组件和样式，无需手动 import。

全局样式引入

在 main.js 中引入 Vant 基础样式：

import { createApp } from "vue";
import "vant/lib/index.css";
import App from "./App.vue";

createApp(App).mount("#app");

第一个组件 Demo

<template>
  <div class="demo">
    <van-button type="primary">主要按钮</van-button>
    <van-button type="success">成功按钮</van-button>
    <van-button type="warning">警告按钮</van-button>
    <van-button type="danger">危险按钮</van-button>
    <van-button plain>朴素按钮</van-button>
    <van-button round>圆角按钮</van-button>
  </div>
</template>

<style>
.demo {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
</style>

启动开发服务器

npm run dev

打开浏览器，你应该能看到一排不同颜色和样式的按钮——恭喜，你的第一个 Vant 组件跑起来了！

两种引入方式对比

推荐：用 unplugin-vue-components 自动按需引入，零心智负担。