基于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>
在父组件中引入
效果
困困 写不动了 都不知道自己写了啥