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=“标签名” 进行设置
vue2-vant组件库的使用_第1张图片
(6) 可以配合路由 ,在 上添加 route,to=“路由”

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

你可能感兴趣的:(前端,vue.js,前端)