Vue3 Vant3 安装及配置

 Vant 3 - Mobile UI Components built on Vue

1. 通过 npm 安装

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

npm i vant

2. 引入组件

1. 安装插件

# 通过 npm 安装

npm i unplugin-vue-components -D

2. 配置插件

如果是基于 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()],
      }),
    ],
  },
};

3. 测试

页面引用

<template>
    <div>
        <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>

    </div>
</template>