Vue3中安装和使用Vant

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 文件中配置插件：