Vue 3 项目初始化怎么配置 Vant 移动端组件库-Vue.js-PHP中文网

Vue 3 中配置 Vant 的核心是按需引入、自动注册和函数组件手动处理：安装 vant、unplugin-vue-components 及 VantResolver；在 vite.config.ts 中配置自动导入；在 main.ts 中显式引入并 use Toast、Dialog 等函数组件；建议补充移动端适配。

vue 3 项目初始化怎么配置 vant 移动端组件库

Vue 3 项目中配置 Vant，核心是「按需引入 + 自动注册 + 函数组件手动处理」三步到位。不推荐全量引入，既增大包体积，又影响 Tree-shaking 效果。

安装 Vant 和自动导入插件

进入已创建的 Vue3 项目（如用 Vite），执行：

npm install vant@latest —— 安装最新稳定版 Vant（当前为 4.x）
npm install unplugin-vue-components -D —— 提供组件自动导入能力
npm install @vant/auto-import-resolver -D（或使用 VantResolver，见下文）

配置 vite.config.ts 实现自动按需导入

在 vite.config.ts 的 plugins 中加入：

import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

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

配置后，、等组件可直接在模板中使用，无需 import。

Element Plus UI Vue3

Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。

下载

手动注册函数式组件（Toast / Dialog / Notify 等）

这些组件不是标签形式，而是通过 JS 调用的函数，自动导入插件无法处理其样式和逻辑，必须显式引入和注册：

在 main.ts 中添加：

import { createApp } from 'vue';
import { Toast, Dialog, Notify, ImagePreview } from 'vant';
import 'vant/lib/index.css';

const app = createApp(App);
app.use(Toast);
app.use(Dialog);
app.use(Notify);
app.use(ImagePreview);

之后即可在任意组件中调用 Toast.success('操作成功') 等方法。