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

Vue项目实战——【基于 Vue3.x + Vant UI】实现一个多功能记账本（开发导航栏及公共部分） 基于 Vue3.x + Vant UI 的多功能记账本（三）文章目录基于 Vue3.x + Vant UI 的多功能记账本（三）项目演示开发导航栏1、底部导航栏2、测试底部导航栏3、公共头部写到最后（附源码）系列内容参考链接基于 Vue3.x + Vant UI 的多功能记账本（一）项目演示，涉及知识点基于 Vue3.x + Vant UI 的多功能记账本（二）搭建开发环境项目演示

推荐整理分享Vue项目实战——【基于 Vue3.x + Vant UI】实现一个多功能记账本（开发导航栏及公共部分）(vuecli项目实战)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vuecli项目实战,vue做项目的流程,vue实例完整项目源码,vuecli项目实战,vue项目实例,vuejs项目实战,vue做项目的流程,vue项目实战教程,内容如对您有帮助，希望把文章链接给更多的朋友！

Vue3 + Vant UI_多功能记账本

开发导航栏1、底部导航栏

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

NavBar.vue

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

<template> <van-tabbar v-model="active"> <!-- 三个导航，通过 link 方法切换相应路径对应的页面 --> <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，打开浏览器可以看到…

2、测试底部导航栏

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

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>

3、公共头部

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

Header.vue

公共头部，详细内容看代码和注释<template> <!-- 占位标签，给的高度和 NavBar 组件一样高，这样就能将顶部撑开，不会让页面有一部分隐藏在 NavBar 后面 --> <div class="block"></div> <!-- title 通过变量的形式从外部传入，固定定位定位到页面顶部 --> <!-- left-text：返回标志，left-arrow：箭头标志 --> <van-nav-bar class="header" @click-left="back" :title="title" left-text="返回" left-arrow > <template #right> <!-- iconfont 的字体图标 --> <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>

写到最后（附源码）

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

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

心动不如行动

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

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