vant4的基础用法

news2024/11/19 10:38:28

基于vue3和ts平台来使用

这篇文章会手把手的教你如何用vant开发h5

介绍

Vant 是一个轻量、可靠的移动端组件库，基于 Vue3，由有赞开发并且维护。有赞作为早期以 H5 商城、小程序商城做微信生态的起家， Vant 一直是这些产品的主要组成部分，有赞的技术团队一直在维护，非常可靠。

下面，将教大家如何使用vant4

1,安装

npm i vant

安装最新版本即可

2.注册

2.1，局部注册

在组件内单独注册

import { Button } from 'vant'; //引入组件
import 'vant/lib/index.css'; //引入样式
import { onMounted, ref } from "vue"
export default ({
    setup() {

        return {}
    },
    components: {
        vanButton: Button, //注册组件
    },
})

2.2 ，全局注册

在main.ts里全局注册组件

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import vant from "vant" //1.引入vant
import 'vant/lib/index.css'; //2。引入vant样式
createApp(App).use(store).use(router).use(ElementPlus).use(vant).mount('#app') //3、链式调用use方法，将vant传入，完成全局注册，这里我直接省事，注册了所有的vant组件，
按需注册
   import {Button} from "vant"
    createApp(App).use(store).use(router).use(ElementPlus).use(Button).mount('#app')

建议按需。

3.定义tabbat标签栏

3.1 在router里定义3个组件，作为我们的底部导航栏切换的基础组件，同时在定义一个主组件，用来容纳定义的基础组件

3.2 在组件中定义好我们要显示的内容

<template>
    <div>
        我是commodity组件
    </div>
</template>
<script lang="ts">
export default ({
    setup() {
        return {}
    }
})
</script>
<style scoped>
</style>

3.3 注册路由，将组件和路由绑定


const routes: Array<RouteRecordRaw> = [
  {
    path:"/",  
    name:"host",
    redirect:"/home",
    component:()=>import("../views/IndexHost.vue"),
    children:[  
      {
        path: '/home',
        name: 'home',
        component: () => import("../views/home/IndexHome.vue")
        
      },
      {
        path: '/user',
        name: 'user',
        component: () => import('../views/user/IndexUser.vue')
        
      },
      {
        path: '/commodity',
        name: 'commodity',
        component: () => import('../views/commodity/IndexCommodity.vue')
        
      },
    ]
  },
  
]

3.4 ，在主组件（IndexHost.vue）中定义tabber标签（底部标签）和定义路由容器

<template>
    <div>
        <router-view /> //1.定义路由容器，显示在上层
        <div>
        <van-tabbar v-model="active">
            <van-tabbar-item name="home" icon="home-o" @click="cuttab('home')" replace to="/home">首页</van-tabbar-item> //2.定义底部tab，通过actuve属性的来确定当前选中的是哪个tab，replacr为true，表示在当前页面跳转，to属性表示点击时跳转到这个路由
            <van-tabbar-item name="search" icon="search"  @click="cuttab('search')" replace to="/commodity">商品</van-tabbar-item>
            <van-tabbar-item name="friends" icon="friends-o"  @click="cuttab('friends')" replace to="/user">用户</van-tabbar-item>
        </van-tabbar>
        </div>
    </div>
</template>
<script lang="ts">
import { ref } from 'vue';
export default ({
    setup() {
        const active = ref('home');


        const cuttab=(name:string)=>{  //3.定义方法，当点击tab时传入name，用name来替换avtive的值，实现点击时切换tab的交互
            active.value = name
        }

        return {
            active,
            cuttab
        }
    }
})
</script>
<style scoped></style>

实现效果