Vant UI库深度解析：轻量级Vue移动组件解决方案全指南

Vant UI库深度解析：轻量级Vue移动组件解决方案全指南

【免费下载链接】vant A lightweight, customizable Vue UI library for mobile web apps. 项目地址: https://gitcode.com/gh_mirrors/va/vant

前言：为什么选择Vant构建移动应用？

在移动互联网快速发展的今天，前端开发面临着越来越高的挑战。用户对移动端应用的体验要求不断提升，开发者需要在保证功能丰富的同时，兼顾性能优化和开发效率。然而，传统开发方式往往面临以下痛点：

• 开发效率低下：从零开始构建UI组件库耗时费力，且难以保证组件的一致性和可维护性
• 性能问题：移动设备性能有限，大型UI库容易导致应用加载缓慢、运行卡顿
• 兼容性问题：不同设备、不同系统版本之间的兼容性处理复杂
• 体验一致性：难以在不同平台上保持一致的用户体验

Vant作为一个轻量级、可定制的Vue移动端UI组件库，正是为解决这些问题而生。本文将从架构设计、核心功能、最佳实践等多个维度，全面解析Vant的技术实现和应用场景，帮助开发者充分发挥Vant的优势，构建高质量的移动应用。

读完本文，你将能够：

• 深入理解Vant的架构设计和核心优势
• 掌握Vant的安装配置和组件使用方法
• 学会如何基于Vant构建高性能的移动应用
• 了解Vant的高级特性和生态系统
• 解决在使用Vant过程中可能遇到的常见问题

一、Vant架构设计与核心优势

1.1 架构概览

Vant采用了模块化的架构设计，整体可以分为以下几个部分：

这种分层架构设计使得Vant具有以下优势：

• 高内聚低耦合：各模块职责清晰，便于维护和扩展
• 按需加载：支持Tree Shaking，只引入需要的组件和样式
• 跨版本兼容：同时支持Vue 2和Vue 3，降低迁移成本
• 可定制性：提供丰富的主题定制功能，满足不同品牌需求

1.2 核心优势解析

1.2.1 极致轻量化

Vant坚持"轻量至上"的设计理念，平均组件大小仅为1KB（min+gzip），这一数据在同类UI库中处于领先地位。

Vant实现轻量化的主要手段包括：

• 按需引入：支持组件和样式的按需加载
• 精简API：每个组件只保留最核心的API，避免过度设计
• 高效代码：优化组件实现，减少冗余代码
• CSS优化：使用PostCSS插件自动压缩CSS代码

1.2.2 丰富的组件库

Vant提供了80+高质量组件，覆盖了移动端开发的各种场景：

这些组件具有以下特点：

• 一致性：统一的设计语言和交互体验
• 易用性：简洁的API设计，降低学习成本
• 可访问性：支持无障碍访问，提升应用包容性
• 主题化：支持自定义主题，适应不同品牌风格

1.2.3 完善的类型支持

Vant使用TypeScript开发，提供了完善的类型定义，带来以下好处：

• 类型安全：在编译阶段发现潜在问题
• 开发体验：提供更好的IDE自动补全和提示
• 代码质量：强制类型约束，提升代码可维护性

// Vant组件的TypeScript定义示例
import { CreateComponentPublicInstance } from 'vue';

export interface ButtonProps {
  type?: 'primary' | 'success' | 'default' | 'warning' | 'danger';
  size?: 'large' | 'normal' | 'small' | 'mini';
  text?: string;
  color?: string;
  icon?: string;
  iconPosition?: 'left' | 'right';
  loading?: boolean;
  disabled?: boolean;
  // 更多属性...
}

export type ButtonInstance = CreateComponentPublicInstance<ButtonProps>;

1.2.4 强大的生态系统

Vant拥有完善的生态系统，包括官方扩展和社区贡献的项目：

项目	描述
vant-weapp	微信小程序UI组件库
vant-demo	Vant示例工程集合
vant-cli	UI库构建工具
vant-icons	Vant图标库
3lang3/react-vant	基于Vant的React移动端组件库
vant-aliapp	支付宝小程序UI组件库
Taroify	Vant的Taro版本

这种丰富的生态系统大大扩展了Vant的应用场景，使开发者可以在不同平台上复用相似的UI组件和开发经验。

二、快速上手：从安装到使用

2.1 环境准备

在开始使用Vant之前，需要确保你的开发环境满足以下要求：

• Node.js 14.0.0或更高版本
• Vue 3.0.0或更高版本（使用Vant 3+）
• Vue 2.6.0或更高版本（使用Vant 2）

2.2 安装方式

Vant提供了多种安装方式，可根据项目需求选择：

2.2.1 npm/yarn安装（推荐）

对于现有项目，推荐使用npm或yarn进行安装：

# 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

2.2.2 CDN引入

对于简单的HTML页面或原型开发，可以通过CDN直接引入Vant：

<!-- 引入样式文件 -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/vant@4/lib/index.css"
/>

<!-- 引入Vue和Vant的JS文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@4/lib/vant.min.js"></script>

<script>
  // 在#app标签下渲染一个按钮组件
  const app = Vue.createApp({
    template: `<van-button>按钮</van-button>`,
  });
  app.use(vant);
  app.mount('#app');
</script>

注意：免费CDN一般用于制作原型或个人小型项目，不推荐在企业生产环境中使用。对于企业开发者，建议使用npm引入并通过构建工具进行打包。

2.2.3 脚手架安装

对于新项目，推荐使用Rsbuild、Vite或Nuxt等现代化构建工具创建项目：

# 使用Rsbuild创建项目（Vant作者开发的构建工具）
npm create rsbuild@latest

# 使用Vite创建项目
npm create vite@latest my-vant-app -- --template vue

# 使用Nuxt创建项目
npx nuxi@latest init my-vant-app

2.3 引入组件

Vant支持多种组件引入方式，可根据项目需求选择：

2.3.1 常规用法

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

const app = createApp();

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

// 在模板中使用
// <van-button type="primary">按钮</van-button>

Vant默认支持Tree Shaking，因此不需要配置任何插件，通过Tree Shaking即可移除不需要的JS代码。

2.3.2 按需引入组件样式

在基于Rsbuild、Vite、webpack或vue-cli的项目中，可以使用unplugin-vue-components插件实现组件和样式的按需引入：

1. 安装插件：

npm i @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D

2. 配置插件（以Vite为例）：

// vite.config.js
import vue from '@vitejs/plugin-vue';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from '@vant/auto-import-resolver';

export default {
  plugins: [
    vue(),
    AutoImport({
      resolvers: [VantResolver()],
    }),
    Components({
      resolvers: [VantResolver()],
    }),
  ],
};

3. 在模板中直接使用组件，无需手动引入：

<template>
  <van-button type="primary" @click="showToast('Hello Vant')">按钮</van-button>
</template>

提示：相比于常规用法，按需引入可以减少一部分CSS体积，但使用起来会变得繁琐一些。如果业务对CSS体积要求不是特别极致，推荐使用更简便的常规用法。

2.3.3 在Nuxt中使用

在Nuxt 3中使用Vant时，可以使用@vant/nuxt模块：

1. 安装模块：

npm i @vant/nuxt -D

2. 在nuxt.config.js中添加配置：

export default defineNuxtConfig({
  modules: ['@vant/nuxt'],
});

3. 在模板中直接使用组件：

<template>
  <van-button type="primary" @click="showToast('Hello Vant')">按钮</van-button>
</template>

2.4 基础组件使用示例

下面以几个常用组件为例，展示Vant的基本使用方法：

2.4.1 Button组件

<template>
  <div class="button-container">
    <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>
    
    <van-button size="large">大型按钮</van-button>
    <van-button size="normal">普通按钮</van-button>
    <van-button size="small">小型按钮</van-button>
    <van-button size="mini">迷你按钮</van-button>
    
    <van-button plain>朴素按钮</van-button>
    <van-button hairline>细边框按钮</van-button>
    <van-button disabled>禁用按钮</van-button>
    
    <van-button icon="plus">带图标按钮</van-button>
    <van-button loading>加载中按钮</van-button>
  </div>
</template>

<style>
.button-container .van-button {
  margin: 8px;
}
</style>

2.4.2 Toast组件

<template>
  <div class="toast-container">
    <van-button type="primary" @click="showTextToast">文本提示</van-button>
    <van-button type="success" @click="showSuccessToast">成功提示</van-button>
    <van-button type="warning" @click="showWarningToast">警告提示</van-button>
    <van-button type="danger" @click="showDangerToast">错误提示</van-button>
  </div>
</template>

<script setup>
import { showToast } from 'vant';

const showTextToast = () => {
  showToast('这是一个文本提示');
};

const showSuccessToast = () => {
  showToast({
    message: '操作成功',
    type: 'success',
    duration: 2000,
  });
};

const showWarningToast = () => {
  showToast({
    message: '请注意',
    type: 'warning',
    icon: 'warning-o',
  });
};

const showDangerToast = () => {
  showToast({
    message: '操作失败',
    type: 'error',
  });
};
</script>

2.4.3 List组件（上拉加载）

<template>
  <van-list
    v-model:loading="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
  >
    <van-cell v-for="item in list" :key="item" :title="`列表项 ${item}`" />
  </van-list>
</template>

<script setup>
import { ref } from 'vue';

const list = ref([]);
const loading = ref(false);
const finished = ref(false);
let count = 0;

const onLoad = () => {
  // 模拟加载延迟
  setTimeout(() => {
    for (let i = 0; i < 10; i++) {
      list.value.push(++count);
    }
    
    // 加载状态结束
    loading.value = false;
    
    // 数据全部加载完成
    if (count >= 40) {
      finished.value = true;
    }
  }, 1000);
};
</script>

三、核心组件深度解析

3.1 布局组件：Grid和Layout

Vant提供了灵活的布局组件，帮助开发者快速构建响应式界面。

3.1.1 Grid组件

Grid组件用于创建网格布局，非常适合展示图片或图标等内容：

<template>
  <van-grid :column-num="4">
    <van-grid-item icon="home-o" text="首页" />
    <van-grid-item icon="search" text="搜索" />
    <van-grid-item icon="friends-o" text="朋友" />
    <van-grid-item icon="setting-o" text="设置" />
    <van-grid-item icon="shopping-cart-o" text="购物车" />
    <van-grid-item icon="star-o" text="收藏" />
    <van-grid-item icon="phone-o" text="电话" />
    <van-grid-item icon="camera-o" text="相机" />
  </van-grid>
</template>

Grid组件支持以下特性：

• 自定义列数（column-num）
• 调整网格间距（gutter）
• 设置内容大小（icon-size、text-size）
• 自定义背景色和边框

3.1.2 Layout组件（Row和Col）

Row和Col组件用于创建flex布局，提供更灵活的页面布局方案：

<template>
  <!-- 基础用法 -->
  <van-row>
    <van-col span="8">span: 8</van-col>
    <van-col span="8">span: 8</van-col>
    <van-col span="8">span: 8</van-col>
  </van-row>
  
  <!-- 列间距 -->
  <van-row gutter="20">
    <van-col span="8">span: 8</van-col>
    <van-col span="8">span: 8</van-col>
    <van-col span="8">span: 8</van-col>
  </van-row>
  
  <!-- 混合布局 -->
  <van-row>
    <van-col span="12">span: 12</van-col>
    <van-col span="6">span: 6</van-col>
    <van-col span="6">span: 6</van-col>
  </van-row>
  
  <!-- 对齐方式 -->
  <van-row justify="center">
    <van-col span="6">居中对齐</van-col>
  </van-row>
  
  <van-row justify="end">
    <van-col span="6">右对齐</van-col>
  </van-row>
  
  <van-row justify="space-between">
    <van-col span="6">两端对齐</van-col>
    <van-col span="6">两端对齐</van-col>
  </van-row>
</template>

3.2 表单组件：Form和Field

Vant提供了完善的表单组件，支持各种表单场景需求。

3.2.1 Form组件

Form组件用于管理表单数据和验证：

<template>
  <van-form @submit="onSubmit">
    <van-field
      v-model="username"
      name="username"
      label="用户名"
      placeholder="请输入用户名"
      :rules="[{ required: true, message: '请输入用户名' }]"
    />
    
    <van-field
      v-model="password"
      type="password"
      name="password"
      label="密码"
      placeholder="请输入密码"
      :rules="[{ required: true, message: '请输入密码' }, { min: 6, message: '密码长度不能少于6位' }]"
    />
    
    <van-field
      v-model="email"
      name="email"
      label="邮箱"
      placeholder="请输入邮箱"
      :rules="[{ type: 'email', message: '请输入正确的邮箱格式' }]"
    />
    
    <div style="margin: 16px;">
      <van-button type="primary" block native-type="submit">提交</van-button>
    </div>
  </van-form>
</template>

<script setup>
import { ref } from 'vue';
import { showToast } from 'vant';

const username = ref('');
const password = ref('');
const email = ref('');

const onSubmit = (values) => {
  showToast('提交成功');
  console.log('表单数据:', values);
};
</script>

3.2.2 高级表单组件：Picker和DatePicker

Vant提供了丰富的选择器组件，满足各种数据选择需求：

<template>
  <van-cell-group>
    <van-field
      v-model="gender"
      is-link
      name="gender"
      label="性别"
      placeholder="请选择性别"
      @click="showGenderPicker = true"
    />
    
    <van-field
      v-model="birthdate"
      is-link
      name="birthdate"
      label="出生日期"
      placeholder="请选择出生日期"
      @click="showDatePicker = true"
    />
    
    <van-field
      v-model="city"
      is-link
      name="city"
      label="城市"
      placeholder="请选择城市"
      @click="showCityPicker = true"
    />
  </van-cell-group>
  
  <!-- 性别选择器 -->
  <van-picker
    v-model="showGenderPicker"
    title="选择性别"
    :columns="genderColumns"
    @confirm="onGenderConfirm"
  />
  
  <!-- 日期选择器 -->
  <van-date-picker
    v-model="showDatePicker"
    title="选择出生日期"
    :min-date="new Date(1900, 0, 1)"
    :max-date="new Date()"
    @confirm="onDateConfirm"
  />
  
  <!-- 城市选择器 -->
  <van-area
    v-model="showCityPicker"
    title="选择城市"
    @confirm="onCityConfirm"
  />
</template>

<script setup>
import { ref } from 'vue';

const gender = ref('');
const birthdate = ref('');
const city = ref('');
const showGenderPicker = ref(false);
const showDatePicker = ref(false);
const showCityPicker = ref(false);
const genderColumns = ['男', '女', '保密'];

const onGenderConfirm = (value) => {
  gender.value = value;
};

const onDateConfirm = (date) => {
  birthdate.value = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
};

const onCityConfirm = (values) => {
  city.value = values.filter(Boolean).join('/');
};
</script>

3.3 数据展示组件：List和TreeSelect

Vant提供了多种数据展示组件，帮助开发者高效展示复杂数据。

3.3.1 List组件

List组件用于展示长列表，支持下拉刷新和上拉加载：

<template>
  <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      error-text="加载失败，点击重试"
      @error="onError"
    >
      <van-cell v-for="item in list" :key="item" :title="`列表项 ${item}`" />
    </van-list>
  </van-pull-refresh>
</template>

<script setup>
import { ref } from 'vue';

const list = ref([]);
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);
let count = 0;

const onLoad = () => {
  // 模拟加载延迟
  setTimeout(() => {
    for (let i = 0; i < 10; i++) {
      list.value.push(++count);
    }
    
    // 加载状态结束
    loading.value = false;
    
    // 数据全部加载完成
    if (count >= 40) {
      finished.value = true;
    }
  }, 1000);
};

const onRefresh = () => {
  // 清空列表数据
  list.value = [];
  count = 0;
  finished.value = false;
  
  // 重新加载数据
  onLoad().then(() => {
    refreshing.value = false;
  });
};

const onError = () => {
  loading.value = true;
  onLoad();
};
</script>

3.3.2 TreeSelect组件

TreeSelect组件用于展示树形结构数据，支持多级嵌套：

<template>
  <van-tree-select
    v-model:active-id="activeId"
    v-model:main-active-index="mainActiveIndex"
    :items="items"
    height="550"
    :max="2"
    :selectable="false"
  />
</template>

<script setup>
import { ref } from 'vue';

const activeId = ref([]);
const mainActiveIndex = ref(0);
const items = [
  {
    text: '电子产品',
    id: '1',
    children: [
      { text: '手机', id: '1-1', disabled: true },
      { text: '电脑', id: '1-2' },
      { text: '平板', id: '1-3' },
    ],
  },
  {
    text: '家用电器',
    id: '2',
    children: [
      { text: '冰箱', id: '2-1' },
      { text: '洗衣机', id: '2-2' },
      { text: '空调', id: '2-3' },
    ],
  },
  {
    text: '生活用品',
    id: '3',
    children: [
      { text: '洗漱用品', id: '3-1' },
      { text: '厨房用品', id: '3-2' },
      { text: '清洁用品', id: '3-3' },
    ],
  },
];
</script>

3.4 交互组件：Swipe和Tabs

交互组件是提升用户体验的关键，Vant提供了丰富的交互组件。

3.4.1 Swipe组件

Swipe组件用于轮播展示图片或内容：

<template>
  <!-- 基础用法 -->
  <van-swipe class="my-swipe" :autoplay="3000">
    <van-swipe-item>1</van-swipe-item>
    <van-swipe-item>2</van-swipe-item>
    <van-swipe-item>3</van-swipe-item>
    <van-swipe-item>4</van-swipe-item>
  </van-swipe>
  
  <!-- 图片轮播 -->
  <van-swipe class="image-swipe" :autoplay="3000" indicator-color="white">
    <van-swipe-item v-for="image in images" :key="image">
      <img :src="image" class="image" />
    </van-swipe-item>
  </van-swipe>
  
  <!-- 卡片样式 -->
  <van-swipe class="card-swipe" :loop="false" :width="240">
    <van-swipe-item v-for="image in images" :key="image">
      <img :src="image" class="card-image" />
    </van-swipe-item>
  </van-swipe>
</template>

<style>
.my-swipe .van-swipe-item {
  color: white;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #39a9ed;
}

.image-swipe {
  height: 180px;
}

.image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-swipe {
  margin: 0 auto;
}

.card-image {
  width: 220px;
  height: 140px;
  border-radius: 8px;
  display: block;
  margin: 0 auto;
}
</style>

<script setup>
const images = [
  'https://img01.yzcdn.cn/vant/apple-1.jpg',
  'https://img01.yzcdn.cn/vant/apple-2.jpg',
  'https://img01.yzcdn.cn/vant/apple-3.jpg',
];
</script>

3.4.2 Tabs组件

Tabs组件用于在不同内容区域之间进行切换：

<template>
  <!-- 基础用法 -->
  <van-tabs v-model:active="active" @change="onChange">
    <van-tab title="标签 1">内容 1</van-tab>
    <van-tab title="标签 2">内容 2</van-tab>
    <van-tab title="标签 3">内容 3</van-tab>
  </van-tabs>
  
  <!-- 标签栏滚动 -->
  <van-tabs>
    <van-tab v-for="index in 8" :key="index" :title="`标签 ${index}`">
      内容 {{ index }}
    </van-tab>
  </van-tabs>
  
  <!-- 禁用标签 -->
  <van-tabs>
    <van-tab title="标签 1">内容 1</van-tab>
    <van-tab title="标签 2" disabled>内容 2</van-tab>
    <van-tab title="标签 3">内容 3</van-tab>
  </van-tabs>
  
  <!-- 样式风格 -->
  <van-tabs type="card">
    <van-tab title="标签 1">卡片样式</van-tab>
    <van-tab title="标签 2">卡片样式</van-tab>
    <van-tab title="标签 3">卡片样式</van-tab>
  </van-tabs>
  
  <van-tabs type="line">
    <van-tab title="标签 1">下划线样式</van-tab>
    <van-tab title="标签 2">下划线样式</van-tab>
    <van-tab title="标签 3">下划线样式</van-tab>
  </van-tabs>
</template>

<script setup>
import { ref } from 'vue';
import { showToast } from 'vant';

const active = ref(0);

const onChange = (index) => {
  showToast(`切换到标签 ${index + 1}`);
};
</script>

四、Vant高级特性

4.1 主题定制

Vant支持丰富的主题定制功能，可以满足不同品牌的视觉需求。

4.1.1 自定义主题变量

Vant使用CSS变量定义主题样式，可以通过覆盖这些变量来自定义主题：

/* 在全局样式中覆盖CSS变量 */
:root {
  /* 主色调 */
  --van-primary-color: #722ed1;
  /* 成功色 */
  --van-success-color: #00b42a;
  /* 警告色 */
  --van-warning-color: #ff7d00;
  /* 危险色 */
  --van-danger-color: #f53f3f;
  /* 黑色 */
  --van-black: #1d1e20;
  /* 白色 */
  --van-white: #ffffff;
  /* 灰色 */
  --van-gray-1: #f7f8fa;
  --van-gray-2: #f2f3f5;
  --van-gray-3: #e5e6eb;
  --van-gray-4: #c9cdd4;
  --van-gray-5: #86909c;
  --van-gray-6: #4e5969;
  --van-gray-7: #272e3b;
  --van-gray-8: #1d2129;
  /* 字体大小 */
  --van-font-size-xs: 10px;
  --van-font-size-sm: 12px;
  --van-font-size-md: 14px;
  --van-font-size-lg: 16px;
  --van-font-size-xl: 18px;
  /* 圆角 */
  --van-radius-sm: 2px;
  --van-radius-md: 4px;
  --van-radius-lg: 8px;
  --van-radius-xl: 16px;
  /* 边框宽度 */
  --van-border-width: 1px;
  /* 行高 */
  --van-line-height-xs: 1.2;
  --van-line-height-sm: 1.4;
  --van-line-height-md: 1.5;
  --van-line-height-lg: 1.6;
  /* 间距 */
  --van-padding-base: 4px;
  --van-padding-xs: 8px;
  --van-padding-sm: 12px;
  --van-padding-md: 16px;
  --van-padding-lg: 24px;
  --van-padding-xl: 32px;
}

4.1.2 按需覆盖主题变量

除了全局覆盖，还可以针对特定组件覆盖主题变量：

/* 仅覆盖Button组件的样式 */
.van-button {
  --van-button-primary-background-color: #722ed1;
  --van-button-primary-border-color: #722ed1;
  --van-button-primary-text-color: #fff;
}

/* 仅覆盖Tab组件的样式 */
.van-tabs {
  --van-tabs-nav-background-color: #f5f5f5;
  --van-tabs-active-color: #722ed1;
  --van-tabs-inactive-color: #6b7280;
}

4.1.3 使用主题生成工具

Vant提供了在线主题生成工具，可以可视化定制主题并导出配置：

1. 访问Vant主题生成网站（https://youzan.github.io/vant/#/zh-CN/theme）
2. 在界面上调整主题颜色、字体大小等参数
3. 下载生成的主题配置文件
4. 在项目中引入主题配置文件

4.2 国际化

Vant内置了30+种语言的国际化支持，可以轻松实现多语言切换。

4.2.1 全局配置

import { createApp } from 'vue';
import Vant from 'vant';
import enUS from 'vant/es/locale/lang/en-US';
import zhCN from 'vant/es/locale/lang/zh-CN';
import jaJP from 'vant/es/locale/lang/ja-JP';

const app = createApp();

// 配置默认语言
app.use(Vant, {
  locale: zhCN,
});

4.2.2 动态切换语言

<template>
  <div>
    <van-button @click="changeLocale('zh-CN')">简体中文</van-button>
    <van-button @click="changeLocale('en-US')">English</van-button>
    <van-button @click="changeLocale('ja-JP')">日本語</van-button>
    
    <van-dialog v-model:show="show" title="标题" confirm-text="确认" cancel-text="取消">
      这是一段文本
    </van-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useLocale } from 'vant';
import enUS from 'vant/es/locale/lang/en-US';
import zhCN from 'vant/es/locale/lang/zh-CN';
import jaJP from 'vant/es/locale/lang/ja-JP';

const show = ref(true);
const { changeLocale } =

【免费下载链接】vant A lightweight, customizable Vue UI library for mobile web apps. 项目地址: https://gitcode.com/gh_mirrors/va/vant