vant 官网:https://youzan.github.io/vant/v2/#/zh-CN/quickstart
注意:vue2 和 vue3 中 安装 vant 有差别,具体安装和使用方法查阅官网文档
vant 有全局引入 和 按需引入,具体操作可以查阅 vant官方文档
安装使用步骤参考:
(1) npm 安装- - -npm i vant@latest-v2 -S
(2) 在main.js 中进行 vant 配置
// 导入vant包 和其相关样式
import Vant from 'vant'
import 'vant/lib/index.css'
// 将 vant 组件库安装到 Vue 上
Vue.use(Vant)
(3) 在vue文件中使用 vant标签,例如:
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="default">默认按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>
(4) 如果有数据方面的操作,在vue文件的 js 部分进行 相应设置,具体使用方法参考 vant 官方文档
(5) 可以选择所需图标,icon=“标签名” 进行设置
(6) 可以配合路由 ,在<van-tabbar> 上添加 route,to=“路由”
<van-tabbar route>
<!-- <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item> -->
<van-tabbar-item icon="home-o" to="/home">首页</van-tabbar-item>
<van-tabbar-item icon="user-o" to="/user">我的</van-tabbar-item>
</van-tabbar>
更多使用方法查阅 vant 官方文档~