1.安装Vant

• Vue 3 项目，安装最新版 Vant

       npm i vant
  

如果安装时，出现错误。

执行该行代码： npm i vant --legacy-peer-deps

2.使用Vant

方法一. 常规用法

在main.js中使用以下代码

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

const app = createApp();

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

方法二. 按需引入组件样式

方法二分为2步，不需要再一个一个使用插件，用哪个系统就会自动生成哪个插件

• 第一步：安装插件

通过 npm 安装 npm i unplugin-vue-components -D

如果安装时报错，尝试执行以下代码：

npm i unplugin-vue-components -D --legacy-peer-deps

• 第二步：配置插件

配置插件分为2种情况，分别是vite项目，vue-cli项目

**如果是基于

vite

的项目，在

vite.config.js

文件中配置插件：**

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

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

**如果是基于

vue-cli

的项目，在

vue.config.js

文件中配置插件：**

const { VantResolver } = require('unplugin-vue-components/resolvers');
const ComponentsPlugin = require('unplugin-vue-components/webpack');

module.exports = {
  configureWebpack: {
    plugins: [
      ComponentsPlugin({
        resolvers: [VantResolver()],
      }),
    ],
  },
};

• 第三步：使用组件

完成以上两步，就可以直接在模板中使用 Vant 组件了，

unplugin-vue-components

会解析模板并自动注册对应的组件。

<template>
  <van-button type="primary" />
</template>

• 第四步： 引入函数组件的样式

Vant 中有个别组件是以函数的形式提供的，包括

Toast

，

Dialog

，

Notify

和

ImagePreview

组件。在使用函数组件时，

unplugin-vue-components

无法自动引入对应的样式，因此需要手动引入样式。

// Toast
import { Toast } from 'vant';
import 'vant/es/toast/style';

// Dialog
import { Dialog } from 'vant';
import 'vant/es/dialog/style';

// Notify
import { Notify } from 'vant';
import 'vant/es/notify/style';

// ImagePreview
import { ImagePreview } from 'vant';
import 'vant/es/image-preview/style';