vue2-vant组件库的使用

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 官方文档~

标签：vant,查阅,使用,文档,vue2,按钮,组件,安装
来源： https://blog.csdn.net/qq_39111074/article/details/123187623