办公室装修设计网站_怎么制作悬赏平台app_家庭优化大师下载_seo软件代理

🤟致敬读者

• 🟩感谢阅读🟦笑口常开🟪生日快乐⬛早点睡觉

📘博主相关

• 🟧博主信息🟨博客首页🟫专栏推荐🟥活动信息

---

---

📃文章前言

• 🔷文章均为学习工作中整理的笔记。
• 🔶如有错误请指正，共同学习进步。

---

《从零搭建Vue3项目实战》（AI辅助搭建Vue3+ElemntPlus后台管理项目）零基础入门系列第七篇:菜单栏实现

从零搭建Vue3项目实战，借助AI工具辅助学习和代码生成，零基础小白亦可轻松上手实现。

以下为系列篇所有文章：
《从零搭建Vue3项目实战》零基础入门系列第一篇:开发环境准备
《从零搭建Vue3项目实战》零基础入门系列第二篇:项目创建和初始化
《从零搭建Vue3项目实战》零基础入门系列第三篇:ElementPlus引入和应用
《从零搭建Vue3项目实战》零基础入门系列第四篇:登录页面实现
《从零搭建Vue3项目实战》零基础入门系列第五篇:登录页面优化及使用AI学习代码
《从零搭建Vue3项目实战》零基础入门系列第六篇:页面跳转功能实现（Router的引入和使用）
《从零搭建Vue3项目实战》零基础入门系列第七篇:菜单栏实现
《从零搭建Vue3项目实战》零基础入门系列第八篇:菜单栏优化和阶段项目源码
《从零搭建Vue3项目实战》零基础入门系列第九篇:用户管理功能实现
《从零搭建Vue3项目实战》零基础入门系列第十篇:商品管理功能实现
《从零搭建Vue3项目实战》零基础入门系列第十一篇:订单管理功能实现
《从零搭建Vue3项目实战》零基础入门系列第十二篇（完结篇）:数据统计功能实现
《从零搭建Vue3项目实战》零基础入门一篇通关（AI辅助搭建Vue3+ElemntPlus后台管理项目）

系列文章均收录在前端vue3入门实战专栏中，可订阅专栏了解更多内容

1. 提示词

在首页组件HomeView.vue中实现菜单栏功能
对ai提问，注意，ai有两个入口，左边是AI chat右边是AI Deverloper
正常学习问答选左边，解释代码也是默认左边AI chat
代码开发，功能代码提问来实现代码则选右边AI Deverloper

如下选择右侧AI Deverloper
AI提示词

帮我实现左侧菜单栏，菜单包含：用户管理、商品管理、订单管理、数据统计。其中订单管理菜单下有两个子菜单分别是线上订单和线下订单

ai回答结果如下

这里是英文（VSCode未使用中文插件），向让他回答中文，下拉到最底下，点击中文即可

2. AI回答内容

中文回答如下，修改代码的组件为router/index.js和src/views/HomeView.vue

3. 代码接收

我们可以想之前一样在上图中红框内文件位置选择Accept接受代码，也可以像下面界面右上角选择Accept接受（鼠标先左键点击一下右边代码界面才会出现Accept）
注意：鼠标左键点击一侧后，再点Accept就表示接受刚刚鼠标点的那一侧的代码，故鼠标点击右侧新生成的代码，然后点击Accept接受新代码
接收后代码更新，然后会弹出下一个需要修改的代码文件router/index.js
同样选择接受Accept，选择后代码更新

4. 代码内容

如下贴出AI生成的两个文件中的完整代码

4.1 src/views/HomeView.vue

HomeView.vue

<template><div class="home-container"><el-menudefault-active="1"class="el-menu-vertical-demo":collapse="isCollapse"><el-sub-menu index="1"><template #title><el-icon><user /></el-icon><span>User Management</span></template><el-menu-item index="1-1" @click="navigateTo('user-management')">Users</el-menu-item><el-menu-item index="1-2" @click="navigateTo('roles')">Roles</el-menu-item></el-sub-menu><el-sub-menu index="2"><template #title><el-icon><goods /></el-icon><span>Product Management</span></template><el-menu-item index="2-1" @click="navigateTo('products')">Products</el-menu-item><el-menu-item index="2-2" @click="navigateTo('categories')">Categories</el-menu-item></el-sub-menu><el-sub-menu index="3"><template #title><el-icon><tickets /></el-icon><span>Order Management</span></template><el-menu-item index="3-1" @click="navigateTo('online-orders')">Online Orders</el-menu-item><el-menu-item index="3-2" @click="navigateTo('offline-orders')">Offline Orders</el-menu-item></el-sub-menu><el-menu-item index="4" @click="navigateTo('data-statistics')"><el-icon><data-analysis /></el-icon><span>Data Statistics</span></el-menu-item></el-menu><div class="content"><h1>Welcome to Home Page</h1></div></div>
</template><script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import {User,Goods,Tickets,DataAnalysis,
} from '@element-plus/icons-vue';const router = useRouter();
const isCollapse = ref(false);const navigateTo = (routeName) => {router.push({ name: routeName });
};
</script><style scoped>
.home-container {display: flex;height: 100vh;background-color: #f0f0f0;
}.el-menu-vertical-demo:not(.el-menu--collapse) {width: 200px;min-height: 400px;
}.content {flex: 1;padding: 20px;
}
</style>

4.2 src/router/index.js

index.js

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: '/',name: 'login',component: () => import('../views/LoginView.vue'),},{path: '/home',name: 'home',component: HomeView,},{path: '/user-management',name: 'user-management',component: () => import('../views/UserManagementView.vue'),},{path: '/roles',name: 'roles',component: () => import('../views/RolesView.vue'),},{path: '/products',name: 'products',component: () => import('../views/ProductsView.vue'),},{path: '/categories',name: 'categories',component: () => import('../views/CategoriesView.vue'),},{path: '/online-orders',name: 'online-orders',component: () => import('../views/OnlineOrdersView.vue'),},{path: '/offline-orders',name: 'offline-orders',component: () => import('../views/OfflineOrdersView.vue'),},{path: '/data-statistics',name: 'data-statistics',component: () => import('../views/DataStatisticsView.vue'),},],
})export default router

5. 代码调试

5.1 报错内容

将上面的代码更新后访问浏览器页面，报错了

不管你报错内容是什么，先跟着做一遍以下尝试

5.2 新建组件

首先菜单栏对应的组件我们之前是没有的，现在它需要创建所有菜单的组件文件，以下依次在src/views目录下创建src/index.js中新增的组件文件
组件列表如下

UserManagementView.vue
RolesView.vue
ProductsView.vue
CategoriesView.vue
OnlineOrdersView.vue
OfflineOrdersView.vue
DataStatisticsView.vue

每一个组件创建后都要填入初始代码结构，以用户管理组件UserManagementView.vue为例，代码内容如下

<template><div>UserManagementView</div>
</template><script setup></script><style scoped></style>

创建后如下

5.3 重新访问

此时再访问浏览器，登录界面如下

5.4 页面效果

随便输入账号密码，登录进去，菜单栏已经有了，如下
点击尝试子菜单功能是否正常

点击子菜单Users，跳转到对应页面

以上就是菜单栏的实现内容

---

📜文末寄语

• 🟠关注我，获取更多内容。
• 🟡技术动态、实战教程、问题解决方案等内容持续更新中。
• 🟢《全栈知识库》技社区，集结全栈各领域开发者，期待你的加入。
• 🔵​加入开发者的《专属社群》，分享交流，技术之路不再孤独，一起变强。
• 🟣点击下方名片获取更多内容🍭🍭🍭👇

---