vant4的基础用法

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

实现效果

4.往首页里填充内容

找到我们的首页组件IndexHome.vue,在里面写首页的页面代码和逻辑，

4.1在首页的顶部实现懒加载轮播图，

这里轮播图我们使用本地的图片，在vue项目components里新建img文件夹，在里面放需要轮播展示的图片

使用轮播图组件实现懒加载轮回播放本地图片

<template>
    <div>
        <div class="topimg">
            <van-swipe :autoplay="3000" lazy-render height="150">  //3.autoplay是轮播间隔时间，height是轮播图在页面上占用的高度
                <van-swipe-item v-for="image in images" :key="image"> //4.图片组循环
                    <img :src="image"/> //5.一次放入img标签渲染
                </van-swipe-item>
            </van-swipe>
        </div>
    </div>
</template>
<script lang="ts">
import a1 from "@/components/imgs/a1.jpg" //1.导入图片
import a2 from "@/components/imgs/a2.jpg"
export default ({
    setup() {
        const images = [ //2.将图片放入在images里面，供上方循环调用 
            a1,a2
        ];
        return {
            images
        }
    }
})
</script>
<style scoped >

.topimg img{
    width:100%;
    height:150px;
}
</style>

效果图

4.2 接入echarts图表

在首页组件中新建一个新的组件，用来存放echarts图表组件

具体代码如下

<template>
    <div>
        <div ref="box" style="height:500px">

        </div>
    </div>
</template>
<script lang="ts">
import { ref } from "vue"
import * as echarts from "echarts"
import { onMounted } from "vue"
export default ({
    setup() {
        const box = ref()

        const fns = () => {
            console.log(box.value)
            var myChart = echarts.init(box.value);
            var option = {
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [150, 230, 224, 218, 135, 147, 260],
                        type: 'line'
                    }
                ]
            };
            myChart.setOption(option);
        }
        onMounted(fns)
        return {
            box
        }
    }
})
</script>
<style></style>

在父组件中引入

效果

困困写不动了都不知道自己写了啥

介绍