基于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"exportdefault ({ setup() { return {} }, components: { vanButton: Button, //注册组件 }, })
2.2 ，全局注册
在main.ts里全局注册组件
import { createApp } from'vue'importAppfrom'./App.vue'importrouterfrom'./router'importstorefrom'./store'importElementPlusfrom'element-plus'import'element-plus/dist/index.css'importvantfrom"vant"//1.引入vantimport'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><scriptlang="ts">exportdefault ({ setup() { return {} } }) </script><stylescoped></style>
3.3 注册路由，将组件和路由绑定
constroutes: 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-tabbarv-model="active"><van-tabbar-itemname="home"icon="home-o"@click="cuttab('home')"replaceto="/home">首页</van-tabbar-item> //2.定义底部tab，通过actuve属性的来确定当前选中的是哪个tab，replacr为true，表示在当前页面跳转，to属性表示点击时跳转到这个路由<van-tabbar-itemname="search"icon="search"@click="cuttab('search')"replaceto="/commodity">商品</van-tabbar-item><van-tabbar-itemname="friends"icon="friends-o"@click="cuttab('friends')"replaceto="/user">用户</van-tabbar-item></van-tabbar></div></div></template><scriptlang="ts">import { ref } from'vue'; exportdefault ({ setup() { constactive=ref('home'); constcuttab=(name:string)=>{ //3.定义方法，当点击tab时传入name，用name来替换avtive的值，实现点击时切换tab的交互active.value=name } return { active, cuttab } } }) </script><stylescoped></style>
实现效果
编辑
4.往首页里填充内容
找到我们的首页组件IndexHome.vue,在里面写首页的页面代码和逻辑，
4.1在首页的顶部实现懒加载轮播图，
这里轮播图我们使用本地的图片，在vue项目components里新建img文件夹，在里面放需要轮播展示的图片
编辑
使用轮播图组件实现懒加载轮回播放本地图片
<template><div><divclass="topimg"><van-swipe :autoplay="3000"lazy-renderheight="150">//3.autoplay是轮播间隔时间，height是轮播图在页面上占用的高度<van-swipe-itemv-for="image in images" :key="image">//4.图片组循环<img :src="image"/>//5.一次放入img标签渲染</van-swipe-item></van-swipe></div></div></template><scriptlang="ts">importa1from"@/components/imgs/a1.jpg"//1.导入图片importa2from"@/components/imgs/a2.jpg"exportdefault ({ setup() { constimages= [ //2.将图片放入在images里面，供上方循环调用 a1,a2 ]; return { images } } }) </script><stylescoped>.topimgimg{ width:100%; height:150px; } </style>
效果图
编辑
4.2 接入echarts图表
在首页组件中新建一个新的组件，用来存放echarts图表组件
编辑
具体代码如下
<template><div><divref="box"style="height:500px"></div></div></template><scriptlang="ts">import { ref } from"vue"import*asechartsfrom"echarts"import { onMounted } from"vue"exportdefault ({ setup() { constbox=ref() constfns= () => { console.log(box.value) varmyChart=echarts.init(box.value); varoption= { 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>
在父组件中引入
编辑
效果
编辑
困困 写不动了 都不知道自己写了啥
