Table of contents
Our previous article simply wrote a home page. As a system management background, the home page is relatively complicated, including menu navigation and displaying specific pages according to the menu. In this article, let chatgpt help us generate the homepage.
home prompt
If you want chatgpt to help you generate code, you need to give clear requirements, the following are our prompt words
Help me write a home page for the management background with vue3 and elementplus. I need to use layout components, which are divided into sidebar, top, main content, and bottom. The sidebar is mainly for displaying menus. The outer layer is a scrolling container, and the inner layer is menu. The first-level menu of the menu is the home page, category management, product management, and system management. The top is wrapped with a div, which is a flex layout, and the horizontal alignment is both ends. An icon is placed on the left side of the content, and the user's name is placed on the right side. Click on the name to display a submenu, which is the personal center, log out, place a table in the main content area, and display copyright information at the bottom
This is the code generated by the first version
<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>
The generated code is laid out with divs, we hope to use the elementplus container layout, and add the hint words again
Use container layout
In the above code, the layout component needs to be changed again with the Container layout 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>
The code does not seem to be a big problem, we paste the code into our HomePage, and then start the project
Here is an error
33:31 error `slot` attributes are deprecated vue/no-deprecated-slot-attribute
Let's ask what chatgpt is
This error is caused by Vue's ESLint rule vue/no-deprecated-slot-attribute. It states that in Vue 3, the slot property is deprecated and is no longer recommended. Instead, you should use the new syntax for defining and using slots.
In Vue 3, slots are defined and referenced using the new v-slot directive. For example, it used to be written as:
<template>
<div>
<slot name="header"></slot>
<slot></slot>
</div>
</template>
In Vue 3, the above code should be rewritten using the v-slot directive:
If you encounter this error in your Vue 3 project, please rewrite the relevant code according to the new syntax rules to avoid using the deprecated slot property. This ensures that your code is compatible with Vue 3 and does not generate any warnings or errors.
Then search for which part of our code is from solt
Mainly there is a problem with the drop-down menu, so we need to go back to the official document, let's see how the example is written
https://element-plus.org/zh-CN/component/dropdown.html#%E5%9F%BA%E7%A1%80%E7%94%A8%E6%B3%95
According to the official documentation, change the code of the drop-down menu to the following
<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>
Visit the home page http://localhost:8080, the current effect is as follows Now there are
four questions, click the menu to open a new page, we hope that when you click the menu, the table content will be displayed in the main content area. The icon is not displayed normally, and there is a vertical scroll bar on the page, and the order of the menu is wrong. Now it is a list of menus without forming a hierarchical relationship.
Display menu hierarchy correctly
Check out the official documentation
https://element-plus.org/zh-CN/component/menu.html#%E4%BE%A7%E6%A0%8F
Mainly because the label of the submenu is wrong, the correct code should be
<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>
The icon does not display properly
We need to use the icon component of elementplus, first we need to install the corresponding package
npm install @element-plus/icons-vue --save
After installation, it needs to be introduced in 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)
}
Then adjust the code in the 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>
Solve the problem of vertical scroll bar
Looking at the source code of the page, the scroll bar is mainly caused by the margins set by the body. We need to add global styles to override body's default styles. Create a new styles folder in the assets directory, create a new global.css inside, and write the following styles
body {
margin: 0;
}
Due to space limitations, the problem of our menu opening a new page will be solved in the next section.