1 安装vant

npm i vant

2 安装 unplugin-vue-components 插件

npm i unplugin-vue-components -D

3 修改配置，  如果是基于 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()],
      }),
    ],
  },
};

修改我的配置

const { defineConfig } = require('@vue/cli-service')

//引入vant ui配置
const { VantResolver } = require('unplugin-vue-components/resolvers');
const ComponentsPlugin = require('unplugin-vue-components/webpack');

module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,//关闭语法检查
  configureWebpack: {
    plugins: [
      ComponentsPlugin({
        resolvers: [VantResolver()],
      }),
    ],
  },
})

4 自定义新建 /src/vant.config.js 配置文件

import { Button, List, Cell, CellGroup } from 'vant';

export function vant(app) {
    app.use(Button);
    app.use(List)
    app.use(Cell);
    app.use(CellGroup);
}

5 main.js引入我的vant.config.js 配置文件

import { vant } from '@/config/vant.config.js' //引入我自定义vant配置
vant(app) //引入vant