Springboot项目下面使用Vue3 + ElementPlus搭建侧边栏首页

embedded/2025/1/1 5:48:28/

Springboot项目下面、在html 页面 Vue3 + ElementPlus 搭建侧边栏首页

1、效果图

2、static 文件下面的项目结构

在这里插入图片描述

3、代码实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>首页</title><!-- Import style --><link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" /><!-- Import Vue 3 --><script src="//unpkg.com/vue@3"></script><!-- Import component library --><script src="//unpkg.com/element-plus"></script><!-- 图标 --><script src="//unpkg.com/@element-plus/icons-vue"></script><style>* {margin: 0;padding: 0;box-sizing: border-box; /* 增加 box-sizing 来避免 padding 和 border 影响宽高 */}.el-header {background-color: rgb(204, 212, 255);display: flex;justify-content: space-between; /* 内容分布到两侧 */align-items: center; /* 垂直居中 */padding: 10px 20px;}.el-aside {background-color: rgb(217, 236, 255);height: 90vh;}.el-main {background-color: rgb(236, 245, 255);}.header-content {display: flex;align-items: center;}.header-content span {font-size: 16px; /* 增大欢迎文字的字体 */margin-right: 20px; /* 欢迎文字和登出链接之间的间距 */}.header-content el-link {font-size: 16px; /* 增大登出链接的字体 */}</style>
</head>
<body>
<div id="app" class="common-layout"><el-container><el-header><h2 style="text-align: center">未来智慧社区管理系统</h2><div class="header-content"><span>欢迎您，admin </span></div></el-header><el-container><el-aside width="200px"><el-menudefault-active="2"class="el-menu-vertical-demo"><el-sub-menu index="1"><template #title><el-icon><location/></el-icon><span>物业系统</span></template><el-menu-item><el-link index="1-1" href="/pages/house.html" target="mainFrame">房屋管理</el-link></el-menu-item><el-menu-item><el-link href="/pages/owner.html" target="mainFrame">业主管理</el-link></el-menu-item><el-menu-item><el-link  index="1-2" href="/pages/building.html" target="mainFrame">楼栋管理</el-link></el-menu-item><el-menu-item><el-link  index="1-3" href="/pages/parking.html" target="mainFrame">车位管理</el-link></el-menu-item></el-sub-menu><el-sub-menu index="2"><template #title><el-icon><Setting /></el-icon><span>系统管理</span></template><el-menu-item><el-link index="2-1" href="/pages/xxx.html" target="mainFrame">用户管理</el-link></el-menu-item><el-menu-item><el-link index="2-2" href="/pages/xxx.html" target="mainFrame">业主管理</el-link></el-menu-item><el-menu-item><el-link index="2-3" href="/pages/xxx.html" target="mainFrame">用户中心</el-link></el-menu-item></el-sub-menu></el-menu></el-aside><el-main><!-- 默认显示 owner --><iframe id="mainFrame" name="mainFrame" src="/pages/owner.html"style="width:100%; height:100%; border:none"></iframe></el-main></el-container></el-container>
</div>
<script>javascript">const { createApp } = Vueconst app = createApp({setup(){return {}}});app.use(ElementPlus)//添加图标for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)}app.mount('#app')</script></body>
</html>