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