Vue3 Vant4框架用法详解（附带实例）

Element Plus 框架适用于 PC 端的中后台管理系统项目，那么针对移动端的项目我们通常选择什么 UI 框架呢？ Vant 框架就是一个不错的选择，Vant3 框架适用于 Vue2，而 Vant4 框架则适用于 Vue3。本节主要介绍 Vant4 框架。

Vant4框架的完整引入操作

1) 创建一个新的 Vue 项目，将其命名为“vue3-book-vant4”，命令如下：

npm create vite@latest vue3-book-vant4 -- --template vue

2) 与 Element Plus 框架相同，Vant4 的官方文档中包含了该框架的安装和配置说明，读者只需按照文档引导一步步操作即可。这里其实分为了两步，简单赘述一下。

① 框架的准备工作：在项目中安装UI框架，命令如下：

npm i vant@4

② 完整引入与安装：在入口文件 main.js 中引入 Vant 框架。修改 main.js 文件，具体代码如下：

import { createApp } from 'vue';
import App from './App.vue';
// 完整引入Vant框架
import Vant from 'vant';
// 完整引入Vant框架的样式文件
import 'vant/lib/index.css';

// 安装Vant框架
createApp(App).use(Vant).mount('#app');

3) 删除 App.vue 文件中的所有代码，同时删除 components 目录下的 HelloWorld.vue 文件。在 App.vue 文件中使用最简单的按钮组件进行测试。

修改后的 App.vue 文件代码如下：

<template>
  <van-button type="primary" @click="handleClick">主要按钮</van-button>
</template>

<script setup>
const handleClick = () => {
  alert('响应点击');
};
</script>

我们会发现页面中能够成功显示一个 Vant 框架的按钮组件，点击按钮显示警告提示。这一过程远远比开发者自己编写按钮和样式代码更快捷、更简便。按钮的初始样式如下图所示。


现在对项目进行产品化打包处理，查看完整引入 Vant 框架后项目的整体体积，命令如下：

npm run build

我们可以在使用 Vant 框架之前和之后分别运行上面的命令，对控制台输出的打包文件大小的日志进行截图，对比打包文件大小，如下图所示：


从图 2 中可以看出，打包生成的 JavaScript 文件大小增大了 200KB 以上，比 186.67KB 的 CSS 文件更大。原因也是因 UI 框架（Vant4）的完整引入导致的，解决方案依然要实现 UI 框架的按需引入打包。

Vant4框架的按需引入打包操作

Vant4 框架的按需引入打包操作只需要进行简单的插件安装与环境配置即可，在入口文件 main.js 中不再需要引入和配置该库了。

按需引入打包操作只需要 3 步即可实现。
1) 在项目中安装 unplugin-vue-components 插件，命令如下：

npm i unplugin-vue-components -D

2) 修改 vite.config.js 配置文件，将插件引入，并调用对应插件。

修改后的 vite.config.js 文件代码如下：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
// 引入Vant框架按需引入打包的插件
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

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

3) 删除入口文件 main.js 中编写的完整引入 Vant 框架的配置代码。

修改后的 main.js 文件代码如下：

import { createApp } from 'vue';
import App from './App.vue';

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

再次运行项目，可以发现页面中的按钮仍旧应用 Vant 的组件样式。再次通过执行“npm run build”命令打包项目，对控制台输出的打包文件大小的日志进行截图，对比打包文件大小，如下图所示：


从图 3 中可以看出，打包生成的 JavaScript 文件大小缩小了 190KB 以上，CSS 文件大小缩小了 120KB 以上。原因同样是 UI 框架（Vant4）进行了按需引入打包操作。

设计业务需求页面

前面对框架的讲解中没有调用 method 方法，本节考虑在 Vant4 移动端项目中构建一个 Tabs 选项卡。除了给该选项卡设置初始的 Tabs 展示页，还要设置一个选项卡按钮，在点击该按钮时跳转到指定下标的位置，同时在控制台中显示出当前选项卡的下标。

在 App.vue 组件文件中利用函数定义选中哪个选项的响应式数据 active（默认选中第一个）和选项卡组件的 ref 对象 tabRef，同时设置一个选项卡切换的监听回调函数 changeTab 和按钮的点击回调函数 switchTab，分别实现在控制台中打印当前选项卡的下标和调用 Tabs 的 scrollTo 方法跳转到指定对象。

需要注意的是，想要使用 Tabs 的 scrollTo 方法，要先通过 ref 对象的查找方法找到 Tabs 对象 tabRef，因此我们可以确认属性和事件需要在组件中设置监听，而组件所拥有的 method 方法则需要通过其他组件触发，当然，其他组件触发的前提是找到目标组件的对象，然后才能成功触发。

App.vue 文件代码如下：

<script setup>
import { ref } from 'vue';
// 定义选中哪个选项（默认选中第一个）
const active = ref(1);
// 定义选项卡组件的ref对象
const tabRef = ref(null);
// 切换选项卡时的事件回调
const changeTab = (index) => {
    console.log('当前选项卡下标：', index);
};
// 点击按钮对选项卡的方法进行调用
const switchTab = () => {
    tabRef.value.scrollTo(2);
};
</script>
<template>
<!-- 利用第三方按钮，在找到Tabs选项卡以后调用其方法 -->
<van-button type="primary" @click="switchTab">切换至第3个标签</van-button>
<!-- 属性绑定与事件监听 -->
<van-tabs v-model:active="active" ref="tabRef" @change="changeTab">
    <van-tab title="标签 1">内容 1</van-tab>
    <van-tab title="标签 2">内容 2</van-tab>
    <van-tab title="标签 3">内容 3</van-tab>
    <van-tab title="标签 4">内容 4</van-tab>
</van-tabs>
</template>

运行项目后可以发现，选项卡的初始位置在下标为 1 的“标签2”上，如下图所示：


切换选项卡后控制台会显示当前下标。当点击“切换至第3个标签”按钮后，选项卡会直接跳转至下标为 2 的“标签3”上，如下图所示：


此时就完成了 Vant4 框架的学习。不管是 Element Plus 还是 Vant4 框架，其使用的方式都基本类似。