添加tabbar

src/App.vue

@@ -10,6 +10,7 @@ import { RouterView } from 'vue-router'
 body {
   margin: 0 ;
   overflow: hidden;
+  background-color:#F7F8FA;
 }
  
 </style>

src/components/Header/Header.vue

@@ -0,0 +1,19 @@
+<template>
+    <div>
+        <van-nav-bar :title="title" />
+    </div>
+</template>
+
+<script setup>
+import { ref,defineProps,defineEmits,onMounted } from "vue";
+const {title} = defineProps({
+    title: {
+        type: String,
+        default: () => '',
+    }
+});
+</script>
+
+<style lang="less" scoped>
+
+</style>

src/layout/app/index.vue

@@ -1,7 +1,4 @@
 <template>
-  <van-nav-bar title="标题" />
-
-  <!-- class="layout-content-view" -->
   <router-view v-slot="{ Component }" >
     <keep-alive v-if="route.meta.keepAlive">
       <component :is="Component" key="Layout" />
@@ -9,9 +6,13 @@
     <component :is="Component" v-if="!route.meta.keepAlive" key="Layout" />
   </router-view>
 
-  <van-action-bar>
-    <van-action-bar-icon icon="chat-o" text="首页" color="#ee0a24" />
-  </van-action-bar>
+  <van-tabbar route>
+    <van-tabbar-item replace to="/home" icon="home-o">社交</van-tabbar-item>
+    <van-tabbar-item replace to="/transaction" icon="search">交易</van-tabbar-item>
+    <van-tabbar-item replace to="/wallet" icon="home-o">钱包</van-tabbar-item>
+    <van-tabbar-item replace to="/dapp" icon="search">DAPP</van-tabbar-item>
+    <van-tabbar-item replace to="/me" icon="home-o">我的</van-tabbar-item>
+  </van-tabbar>
 </template>
 
 <script setup>

src/router/index.js

@@ -17,8 +17,32 @@ const router = createRouter({
         { 
           path: "home",
           name: "home",
-          meta: { title: "首页", keepAlive: false },
+          meta: { title: "社交", keepAlive: false },
           component: () => import("@/views/home/index.vue"),
+        },
+        {
+          path: "transaction",
+          name: "transaction",
+          meta: { title: "交易", keepAlive: false },
+          component: () => import("@/views/transaction/index.vue"),
+        },
+        {
+          path: "wallet",
+          name: "wallet",
+          meta: { title: "钱包", keepAlive: false },
+          component: () => import("@/views/wallet/index.vue"),
+        },
+        {
+          path: "dapp",
+          name: "dapp",
+          meta: { title: "DAPP", keepAlive: false },
+          component: () => import("@/views/dapp/index.vue"),
+        },
+        {
+          path: "me",
+          name: "me",
+          meta: { title: "我的", keepAlive: false },
+          component: () => import("@/views/me/index.vue"),
         }
       ],
     },

src/views/dapp/index.vue

@@ -0,0 +1,13 @@
+<template>
+    <div>
+      <Header title="DAPP"></Header>
+    </div>
+  </template>
+  
+  <script setup>
+  import Header from "@/components/Header/Header.vue";
+  </script>
+  
+  <style lang="less" scoped>
+  
+  </style>

src/views/home/index.vue

@@ -1,3 +1,14 @@
 <template>
-  <div>123</div>
-</template>
+  <div>
+    <Header title="社交"></Header>
+      123
+  </div>
+</template>
+
+<script setup>
+import Header from "@/components/Header/Header.vue";
+</script>
+
+<style lang="less" scoped>
+
+</style>

src/views/me/index.vue

@@ -0,0 +1,13 @@
+<template>
+    <div>
+      <Header title="我的"></Header>
+    </div>
+  </template>
+  
+  <script setup>
+  import Header from "@/components/Header/Header.vue";
+  </script>
+  
+  <style lang="less" scoped>
+  
+  </style>

src/views/transaction/index.vue

@@ -0,0 +1,13 @@
+<template>
+    <div>
+      <Header title="交易"></Header>
+    </div>
+  </template>
+  
+  <script setup>
+  import Header from "@/components/Header/Header.vue";
+  </script>
+  
+  <style lang="less" scoped>
+  
+  </style>

src/views/wallet/index.vue

@@ -0,0 +1,13 @@
+<template>
+    <div>
+      <Header title="钱包"></Header>
+    </div>
+  </template>
+  
+  <script setup>
+  import Header from "@/components/Header/Header.vue";
+  </script>
+  
+  <style lang="less" scoped>
+  
+  </style>