一、引入vant4组件库

vant4组件库官网地址：https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart

1、安装

bash

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

# Vue 2 项目，安装 Vant 2
npm i vant@latest-v2

2、引入main.js

js

import { createApp } from 'vue'
import App from './App.vue'
import { Button } from 'vant';
// 引入组件样式
import 'vant/lib/index.css'

const app=createApp(App)
app.use(Button)
app.mount('#app')

3、使用

js

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