《从零搭建Vue3项目实战》（AI辅助搭建Vue3+ElemntPlus后台管理项目）零基础入门系列第八篇:菜单栏优化和阶段项目源码

致敬读者

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

博主相关

• 博主信息博客首页专栏推荐活动信息

---

---

文章前言

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

---

《从零搭建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. 菜单栏优化

1.1 菜单栏右侧展示选中菜单内容

每次点击菜单栏中的某个菜单时，右侧显示菜单对应页面的内容
AI提示词

补充上次的描述，HomeView.vue组件是首页，首页的左侧为菜单栏，右侧则为菜单导航栏对应点的页面内容，项目已经引入router和elementplus，请帮我实现以上功能

注，不是每次都可以完整使用ai的代码，如果有问题可以自行修改或者继续问ai解决方法，最直接的办法就是使用我的代码，复制粘贴即可
优化后的代码如下
src/views/HomeView.vue

<template>
  <div class="home-container">
    <el-menu
      default-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><DataAnalysis /></el-icon>
        <span>Data Statistics</span>
      </el-menu-item>
    </el-menu>
    <div class="content">
      <router-view></router-view>
    </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>

更新代码后，好像页面跳转并不能实现，先接着看，这个问题在后面解决，我们先给菜单栏搞个深一点的颜色

1.2 菜单栏背景色优化

给菜单栏换个深色背景
A提示词：

将HomeView.vue组件中的内容使用vue-router实现，并且导航栏背景色使用深色系

AI给出的代码如下
src/views/HomeView.vue

<template>
  <div class="home-container">
    <el-menu
      default-active="1"
      class="el-menu-vertical-demo"
      :collapse="isCollapse"
      background-color="#304156"  <!-- 修改: 导航栏背景色改为深色系 -->
      text-color="#fff"           <!-- 修改: 导航栏文字颜色改为白色 -->
      active-text-color="#ffd04b" <!-- 修改: 导航栏激活文字颜色改为亮黄色 -->
    >
      <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><DataAnalysis /></el-icon>
        <span>Data Statistics</span>
      </el-menu-item>
    </el-menu>
    <div class="content">
      <router-view></router-view>
    </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>

更新代码后，页面的背景色变成了暗色，如下

1.3 菜单栏菜单跳转页面优化

上面我们实现了菜单栏以及背景色，但是页面跳转到对应菜单时，是整个页面都变成了对应菜单的页面，这个好像不太正常
正常的应该是右侧部分展示菜单对应的页面内容，左侧还是菜单栏，接下来实现这个效果
App.vue组件是整个项目的单页面应用组件，即相当于项目的门面，一切页面展示都是从这个组件进来的
我们来看一下此时此刻App.vue组件中的代码内容
App.vue

<script setup>

</script>

<template>
  <router-view />
</template>

<style scoped>

</style>

这里看到代码中的内容是展示路由对应的页面（标签router-view就是动态展示路由对应的页面），会直接整个页面都展示，所以跳转后左侧菜单栏就没了，如何解决，只需要将这里的展示页面换成首页HomeView.vue页面即可
修改后的代码如下
src/view/HomeView.vue

<script setup>
import HomeView from './views/HomeView.vue';


</script>

<template>
  <HomeView />
</template>

<style scoped>

</style>

代码更新后，点击菜单，右侧展示对应菜单内容，左侧依旧是菜单栏
以下依次为默认的用户管理页面、用户角色页面、商品管理页面的菜单内容展示

1.4 element-plus图标全局引入

上面我们在HomeView.vue中使用了element-plus的图标，引入方式是在组件中直接临时引入，为了方便使用，我们可以全局引入，后续无需再在新建组件中再次引入
AI提示词

全局引入elementplus图标

更新代码
src/main.js

import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

// 导入 Element Plus 图标
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)

// 注册 Element Plus 图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

app.use(createPinia())
app.use(router)
app.use(ElementPlus) // 使用ElementPlus

app.mount('#app')

2. 阶段项目代码

以上算是一个大的阶段，实现了基础的项目架构和页面菜单，下面为以上实现的项目代码，后续也是在此基础上继续开发
CSDN下载：前端 vue3 vue3入门实战 从零搭建vue3+element-plus后台管理项目 阶段1项目源码
GitHub下载：

---

文末寄语

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

---