我们上一篇只是简单写了一个首页,作为一个系统的管理后台,首页相对复杂,既包含菜单导航,又需要根据菜单显示具体的页面。我们本篇就让chatgpt帮我们生成一下首页。
首页提示词
要想让chatgpt帮你生成代码,需要给出明确的需求,下边是我们的提示词
帮我用vue3、elementplus写一个管理后台的首页,要用布局组件,分为侧边栏、顶部、主内容、底部,侧边栏主要是放菜单,外层是滚动容器,内层是menu,menu的一级菜单为首页、分类管理、商品管理、系统管理,系统管理的二级菜单为用户管理、角色管理、菜单管理。顶部用div包裹,是flex布局,水平对齐方式为两端对齐,内容左边放置一个图标,右侧放置用户的姓名,点击姓名出现子菜单,子菜单为个人中心,退出登录,主内容区域放置一个表格,底部显示版权信息
这是第一版生成的代码
<template>
<div class="admin-home">
<div class="sidebar">
<el-scrollbar>
<el-menu :default-active="activeMenu" class="menu" router>
<el-menu-item index="home">首页</el-menu-item>
<el-submenu index="management" v-if="showManagement">
<template #title>分类管理</template>
<el-menu-item index="category">商品分类</el-menu-item>
<el-menu-item index="product">商品管理</el-menu-item>
</el-submenu>
<el-submenu index="system" v-if="showSystem">
<template #title>系统管理</template>
<el-menu-item index="user">用户管理</el-menu-item>
<el-menu-item index="role">角色管理</el-menu-item>
<el-menu-item index="menu">菜单管理</el-menu-item>
</el-submenu>
</el-menu>
</el-scrollbar>
</div>
<div class="main-content">
<div class="top">
<div class="logo">
<!-- 放置图标 -->
</div>
<div class="user-info" @click="toggleSubMenu">
{
{
userName }}
<el-dropdown v-model="subMenuVisible">
<span class="el-dropdown-link">
<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>个人中心</el-dropdown-item>
<el-dropdown-item divided>退出登录</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
<div class="content">
<!-- 放置表格 -->
</div>
<div class="footer">
版权信息
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
activeMenu: 'home',
showManagement: true,
showSystem: true,
userName: 'John Doe',
subMenuVisible: false,
};
},
methods: {
toggleSubMenu() {
this.subMenuVisible = !this.subMenuVisible;
},
},
};
</script>
<style>
.admin-home {
display: flex;
}
.sidebar {
width: 200px;
}
.menu {
width: 100%;
}
.main-content {
flex-grow: 1;
padding: 20px;
}
.top {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
/* 样式 */
}
.user-info {
cursor: pointer;
}
.content {
/* 样式 */
}
.footer {
/* 样式 */
}
</style>
生成的代码是用div布局的,我们希望使用elementplus的container布局,重新补充一下提示词
使用container布局
上述代码中,布局组件需要用Container布局容器再重新改一下
<template>
<el-container class="admin-home">
<el-aside width="200px">
<el-scrollbar>
<el-menu :default-active="activeMenu" class="menu" router>
<el-menu-item index="home">首页</el-menu-item>
<el-submenu index="management" v-if="showManagement">
<template #title>分类管理</template>
<el-menu-item index="category">商品分类</el-menu-item>
<el-menu-item index="product">商品管理</el-menu-item>
</el-submenu>
<el-submenu index="system" v-if="showSystem">
<template #title>系统管理</template>
<el-menu-item index="user">用户管理</el-menu-item>
<el-menu-item index="role">角色管理</el-menu-item>
<el-menu-item index="menu">菜单管理</el-menu-item>
</el-submenu>
</el-menu>
</el-scrollbar>
</el-aside>
<el-container>
<el-header class="top">
<div class="logo">
<!-- 放置图标 -->
</div>
<div class="user-info" @click="toggleSubMenu">
{
{
userName }}
<el-dropdown v-model="subMenuVisible">
<span class="el-dropdown-link">
<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>个人中心</el-dropdown-item>
<el-dropdown-item divided>退出登录</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</el-header>
<el-main class="content">
<!-- 放置表格 -->
</el-main>
<el-footer class="footer">
版权信息
</el-footer>
</el-container>
</el-container>
</template>
<script>
export default {
data() {
return {
activeMenu: 'home',
showManagement: true,
showSystem: true,
userName: 'John Doe',
subMenuVisible: false,
};
},
methods: {
toggleSubMenu() {
this.subMenuVisible = !this.subMenuVisible;
},
},
};
</script>
<style>
.admin-home {
height: 100vh;
}
.top {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
/* 样式 */
}
.user-info {
cursor: pointer;
}
.content {
/* 样式 */
}
.footer {
/* 样式 */
}
</style>
代码看上去问题不大,我们把代码贴入我们的HomePage中,然后启动一下工程
这里提示一个错误
33:31 error `slot` attributes are deprecated vue/no-deprecated-slot-attribute
我们问一下chatgpt是啥问题
这个错误是由Vue的ESLint规则vue/no-deprecated-slot-attribute引起的。它指出在Vue 3中,slot属性已被弃用,不再建议使用。相反,你应该使用新的语法来定义和使用插槽。
在Vue 3中,插槽使用新的v-slot指令来定义和引用。例如,以前的写法是:
<template>
<div>
<slot name="header"></slot>
<slot></slot>
</div>
</template>
在Vue 3中,应该使用v-slot指令来重写上面的代码:
如果你在Vue 3项目中遇到了这个错误,请根据新的语法规则重写相关代码,以避免使用已经被弃用的slot属性。这样可以确保你的代码与Vue 3兼容,并且不会产生任何警告或错误。
那搜索一下我们代码中哪个地方是由solt的
主要是下拉菜单这有问题,这就需要回到官方文档,我们看看示例是如何写的
https://element-plus.org/zh-CN/component/dropdown.html#%E5%9F%BA%E7%A1%80%E7%94%A8%E6%B3%95
按照官方文档将下拉菜单的代码改为如下
<el-dropdown v-model="subMenuVisible">
<span class="el-dropdown-link">
<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>个人中心</el-dropdown-item>
<el-dropdown-item divided>退出登录</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
访问首页http://localhost:8080,目前的效果是这样的
现在的问题有四个,点击菜单打开了新页面,我们希望是点击菜单,表格内容在主内容区域显示。图标没有正常显示出来,而且页面有纵向的滚动条,再就是菜单的顺序不对,现在是罗列的菜单,没有形成层级关系。
正确的显示菜单的层级
查看官方文档
https://element-plus.org/zh-CN/component/menu.html#%E4%BE%A7%E6%A0%8F
主要是因为子菜单的标签不对,正确的代码应该是
<el-menu :default-active="activeMenu" class="menu" router>
<el-menu-item index="home">首页</el-menu-item>
<el-sub-menu index="management" v-if="showManagement">
<template #title>分类管理</template>
<el-menu-item index="category">商品分类</el-menu-item>
<el-menu-item index="product">商品管理</el-menu-item>
</el-sub-menu>
<el-sub-menu index="system" v-if="showSystem">
<template #title>系统管理</template>
<el-menu-item index="user">用户管理</el-menu-item>
<el-menu-item index="role">角色管理</el-menu-item>
<el-menu-item index="menu">菜单管理</el-menu-item>
</el-sub-menu>
</el-menu>
图标显示不正常
我们需要使用elementplus的图标组件,先需要安装对应的包
npm install @element-plus/icons-vue --save
安装好了之后需要在main.js中引入
import {
createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import router from './router/index.js';
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app = createApp(App)
app.use(ElementPlus)
app.use(router);
app.mount('#app')
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
然后调整一下header中的代码
<div class="user-info" @click="toggleSubMenu">
{
{
userName }}
<el-dropdown v-model="subMenuVisible">
<el-icon><CaretBottom /></el-icon>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>个人中心</el-dropdown-item>
<el-dropdown-item divided>退出登录</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
解决纵向滚动条的问题
查看页面源代码,滚动条主要是因为body设置了外边距的原因导致的。我们需要添加全局样式来覆盖body的默认样式。在assets目录下新建styles文件夹,里边新建global.css,并写入如下样式
body {
margin: 0;
}
限于篇幅的问题,我们菜单打开新页面的问题放在下一节中解决。