Vue项目实战——【基于 Vue3.x + Vant UI】实现一个多功能记账本（开发导航栏及公共部分）

一时失言乱红尘 2023-09-27 09:06 12阅读 0赞

## 基于 Vue3.x + Vant UI 的多功能记账本（三） ##

--------------------

#### 文章目录 ####

*  基于 Vue3.x + Vant UI 的多功能记账本（三）
 *   *  项目演示
     *  开发导航栏
     *   *  1、底部导航栏
         *  2、测试底部导航栏
         *  3、公共头部
         *  写到最后（附源码）

<table> 
 <thead> 
  <tr> 
   <th>系列内容</th> 
   <th>参考链接</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>基于 Vue3.x + Vant UI 的多功能记账本（一）</td> 
   <td><a href="http://t.csdn.cn/YX8my" rel="nofollow">项目演示，涉及知识点</a></td> 
  </tr> 
  <tr> 
   <td>基于 Vue3.x + Vant UI 的多功能记账本（二）</td> 
   <td><a href="http://t.csdn.cn/kea5q" rel="nofollow">搭建开发环境</a></td> 
  </tr> 
 </tbody> 
</table>

--------------------

### 项目演示 ###

Vue3 + Vant UI\_多功能记账本

![在这里插入图片描述][5bb1b3f206e74c4b935f282f27fae47d.png]

### 开发导航栏 ###

#### 1、底部导航栏 ####

components 文件夹下，创建 NavBar.vue 组件

NavBar.vue

*  详细内容请看代码和注释
 *  [van-tabbar-item 为标签栏][van-tabbar-item]

![在这里插入图片描述][cafe8ca8d5e94744b3301e8df10bf8ee.png]

<template>
      <van-tabbar v-model="active">
        
        <van-tabbar-item icon="notes-o" @click="link('/home')"
          >明细</van-tabbar-item
        >
        <van-tabbar-item icon="bar-chart-o" @click="link('/data')"
          >统计</van-tabbar-item
        >
        <van-tabbar-item icon="user-o" @click="link('/user')">我的</van-tabbar-item>
      </van-tabbar>
    </template>
    
    <script>
    import {
         ref } from "vue";
    import {
         useRouter } from "vue-router";
    export default {
        
      name: "NavBar",
      props: {
        
        msg: String, // 限制 msg 的类型为字符串
      },
      // 相当于 vue2.x 的 beforeCreate 和 created
      setup() {
        
        // 使用路由
        const router = useRouter();
        const active = ref(0);
    
        // 路由跳转
        const link = (path) => {
        
          router.push({
         path });
        };
    
        return {
        
          active,
          link,
        };
      },
    };
    </script>

Data.vue

<template>统计</template>
    
    <script>
    export default {
        
      name: "Data",
    };
    </script>

User.vue

<template>个人中心</template>
    
    <script>
    export default {
        
      name: "User",
    };
    </script>

在 src/router/inedx.js 将这三个页面给定对应的路径

// 用的是 hash 路由，不需要后端支持
    import {
         createRouter, createWebHashHistory } from "vue-router";
    import Home from '../views/Home.vue'
    import Data from '../views/Data.vue'
    import User from '../views/User.vue'
    
    // 创建路由实例
    const router = createRouter({
        
      history: createWebHashHistory(), // hash 模式
      routes: [
        {
        
          path: "/",
          component: Home
        },
        {
        
          path: "/home",
          component: Home
        },
        {
        
          path: "/data",
          component: Data
        },
        {
        
          path: "/user",
          component: User
        },
      ]
    })
    
    // 抛出路由实例
    export default router

在 App.vue 中引入 NavBar 组件

App.vue

<template>
      <router-view />
      <NavBar />
    </template>
    
    <script>
    import Home from "./views/Home.vue";
    import NavBar from "./components/NavBar.vue";
    
    export default {
        
      name: "App",
      components: {
        
        Home,
        NavBar,
      },
    };
    </script>

Vant UI 的新增组件，需要在 main.js 文件中引入

main.js

import {
         createApp } from 'vue'
    import {
         Button, Tabbar, TabbarItem, Form, Field, Icon, NavBar } from "vant";
    import "lib-flexible/flexible";
    import App from './App.vue'
    import router from './router'
    import "vant/lib/index.css"; // 全局引入样式
    import './index.css'
    
    // 创建实例
    const app = createApp(App)
    
    // 注册组件 => 按需注册
    app.use(router);
    app.use(Tabbar);
    app.use(TabbarItem);
    app.use(Form);
    app.use(Field);
    app.use(Button); // 注册组件
    app.use(Icon);
    app.use(NavBar);
    
    // 注册路由
    app.use(router)
    
    app.mount('#app')

**此时，yarn dev，打开浏览器可以看到…**

![在这里插入图片描述][5cb12ca0442041b19b28f18f6363696e.png]

#### 2、测试底部导航栏 ####

./src/views 文件夹下新建一个 Login.vue 组件

<template>登录注册</template>
    
    <script>
    export default {
        
      name: "Auth",
    };
    </script>

在 ./src/router/index.js 文件中添加以下路由（导入和配置）

import Login from '../views/Login.vue'
    ...
    {
        
      path: '/login',
      component: Login
    }
    ...

在 User.vue 中添加跳转到登录注册的路由

User.vue

<template>
      <Header title="个人中心" />
      个人中心
      <router-link to="/login">前往登录注册</router-link>
    </template>
    
    <script>
    import Header from "../components/Header.vue";
    export default {
        
      name: "User",
      components: {
         Header },
    };
    </script>

![在这里插入图片描述][c5fef5d743e94b98b394f21f57ed6603.png]

--------------------

![在这里插入图片描述][615c504dd66847e2a13295a9cba31735.png]

#### 3、公共头部 ####

./components 文件夹中创建 Header.vue 文件

Header.vue

*  公共头部，详细内容看代码和注释

<template>
      
      <div class="block"></div>
      
      
      <van-nav-bar
        class="header"
        @click-left="back"
        :title="title"
        left-text="返回"
        left-arrow
      >
        <template #right>
          
          <i class="iconfont more">...</i>
        </template>
      </van-nav-bar>
    </template>
    
    <script>
    import {
         useRouter } from "vue-router";
    export default {
        
      name: "Header",
      // 传入的 title 变量
      props: {
        
        title: {
        
          type: String,
          default: "",
        },
      },
      setup() {
        
        const router = useRouter();
        // 点击返回时，返回上一级
        const back = () => {
        
          router.back();
        };
    
        return {
        
          back,
        };
      },
    };
    </script>
    
    <style lang="less" scoped>
    .block {
        
      width: 100%;
      height: 46px;
    }
    .header {
        
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      .more {
        
        font-size: 20px;
        margin-bottom: 15px;
      }
    }
    </style>

导入头部组件并使用，title 是传给 Header.vue 的名字

Data.vue

<template>
      <Header title="统计" />
      统计
    </template>
    
    <script>
    import Header from "../components/Header.vue";
    export default {
        
      name: "Data",
      components: {
         Header },
    };
    </script>

Home.vue

<template>
      <Header title="明细" />
      明细
    </template>
    
    <script>
    import Header from "../components/Header.vue";
    export default {
        
      name: "Home",
      components: {
         Header },
    };
    </script>

User.vue

<template>
      <Header title="个人中心" />
      个人中心
    </template>
    
    <script>
    import Header from "../components/Header.vue";
    export default {
        
      name: "User",
      components: {
         Header },
    };
    </script>

![在这里插入图片描述][a0d3f6c6e4114337b1a10abfbc07fe2e.png]

#### 写到最后（附源码） ####

看到这么好的项目，是不是有种想自己做出来的冲动？

如果有，那么说明你非常的想提升自己，想检验自己这段时间的学习成果，这个项目绝对是你的 **不二选择**

**心动不如行动**

那么接下来，一起从0搭建，开始我们基于 **Vue3.x + Vant UI** 的项目之旅吧~

源码放在了下方的微信公众号里【回复：记账本】即可

[5bb1b3f206e74c4b935f282f27fae47d.png]: https://img-blog.csdnimg.cn/5bb1b3f206e74c4b935f282f27fae47d.png
[van-tabbar-item]: https://vant-contrib.gitee.io/vant/#/zh-CN/tabbar
[cafe8ca8d5e94744b3301e8df10bf8ee.png]: https://img-blog.csdnimg.cn/cafe8ca8d5e94744b3301e8df10bf8ee.png
[5cb12ca0442041b19b28f18f6363696e.png]: https://img-blog.csdnimg.cn/5cb12ca0442041b19b28f18f6363696e.png
[c5fef5d743e94b98b394f21f57ed6603.png]: https://img-blog.csdnimg.cn/c5fef5d743e94b98b394f21f57ed6603.png
[615c504dd66847e2a13295a9cba31735.png]: https://img-blog.csdnimg.cn/615c504dd66847e2a13295a9cba31735.png
[a0d3f6c6e4114337b1a10abfbc07fe2e.png]: https://img-blog.csdnimg.cn/a0d3f6c6e4114337b1a10abfbc07fe2e.png