vant搭建

Yi.Vue3.x.Vant/src/layout/bottom/index.vue

@@ -0,0 +1,20 @@
+<template>
+    <van-tabbar v-model="active" active-color="#ee0a24" inactive-color="#000">
+  <van-tabbar-item icon="home-o" to="/">主页</van-tabbar-item>
+  <van-tabbar-item icon="search">发现</van-tabbar-item>
+
+  <van-tabbar-item>
+    <template #icon="props">
+        <van-icon name="add-square" color="#1989fa" size="3rem" />
+      <!-- <img :src="props.active ? icon.active : icon.inactive" /> -->
+    </template>
+  </van-tabbar-item>
+
+  <van-tabbar-item icon="friends-o">商城</van-tabbar-item>
+  <van-tabbar-item icon="setting-o" to="/my">我的</van-tabbar-item>
+</van-tabbar>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+const active = ref(0);
+</script>

Yi.Vue3.x.Vant/src/layout/index.vue

@@ -0,0 +1,13 @@
+
+<script setup  lang="ts">
+    import { ref } from 'vue'
+    import AppBottom  from './bottom/index.vue'
+</script>
+    
+<template>
+        <router-view></router-view>
+
+    <app-bottom/>
+
+</template>
+

Yi.Vue3.x.Vant/src/layout/main/index.vue

@@ -0,0 +1,17 @@
+<template>
+    <app-tab class="tabs"/>
+</template>
+<script setup lang="ts">
+    import { ref } from 'vue'
+    import AppTab from '@/layout/tab/index.vue'
+
+</script>
+<style scoped>
+.tabs{
+position: absolute;
+top: 0;
+left: 0;
+
+}
+</style>
+    

Yi.Vue3.x.Vant/src/layout/tab/index.vue

@@ -0,0 +1,22 @@
+<template > 
+  <van-tabs   v-model:active="active" offset-top="0" :sticky="true" class="tabs">
+    <van-tab title="关注" to="/follow"></van-tab>
+    <van-tab title="推荐" to="/recommend"></van-tab>
+    <van-tab title="广场"></van-tab>
+    <van-tab title="视频"></van-tab>
+
+    <router-view />
+  </van-tabs>
+</template>
+<script setup lang="ts">
+import { ref } from "vue";
+const active = ref(1);
+</script>
+<style scoped>
+.tabs{
+  width: 25rem;
+}
+.view{
+  margin: auto;
+}
+</style>