项目架构初始化，底部导航页面切换-海口c网

项目架构初始化，底部导航页面切换

article/2025/6/16 0:15:05

引言

在移动端应用开发中，底部导航栏是一种常见的用户界面元素，用于在不同的页面之间进行快速切换。本文将介绍如何初始化一个 Vue.js 项目，并实现底部导航栏页面切换的功能。
在这里插入图片描述

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》、《前端求职突破计划》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

- 引言

初始化项目

首先，使用 Vue CLI 初始化一个新的 Vue.js 项目：

vue create my-app
cd my-app

在初始化过程中，可以选择需要的插件和配置，例如 Babel、Router、Vuex 等。

安装依赖

为了实现底部导航栏，我们可以使用 vue-router 进行页面路由管理，并使用一个 UI 组件库如 Vant 来快速构建导航栏。

npm install vue-router vant

配置路由

在 src 目录下创建 router 文件夹，并在其中创建 index.js 文件：

// src/router/index.js
import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/views/Home.vue';
import Category from '@/views/Category.vue';
import Cart from '@/views/Cart.vue';
import Profile from '@/views/Profile.vue';Vue.use(Router);export default new Router({
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/category',
name: 'category',
component: Category
},
{
path: '/cart',
name: 'cart',
component: Cart
},
{
path: '/profile',
name: 'profile',
component: Profile
}
]
});

创建视图组件

在 src/views 目录下创建四个视图组件：Home.vue、Category.vue、Cart.vue 和 Profile.vue。

<!-- src/views/Home.vue -->
<template>
<div>
<h1>首页</h1>
</div>
</template><script>
export default {
// ...
};
</script>

其他视图组件类似创建。

配置底部导航栏

在 App.vue 中配置 Vant 的 Tabbar 组件：

<!-- src/App.vue -->
<template>
<div id="app">
<van-tabbar v-model="active" route>
<van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
<van-tabbar-item icon="search" to="/category">分类</van-tabbar-item>
<van-tabbar-item icon="shopping-cart-o" to="/cart">购物车</van-tabbar-item>
<van-tabbar-item icon="user-o" to="/profile">我的</van-tabbar-item>
</van-tabbar>
<router-view />
</div>
</template><script>
export default {
data() {
return {
active: 0
};
}
};
</script><style>
/* 添加一些基本样式 */
</style>

启动项目

在 main.js 中引入路由和样式：

// src/main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import 'vant/lib/index.css';Vue.config.productionTip = false;new Vue({
router,
render: h => h(App)
}).$mount('#app');