当前位置： 首页 > article >正文

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

article 2024/12/28 20:33:36

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

1、效果图

image-20241227164910444

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-menu
                        default-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>

    const { createApp } = Vue

    const 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>

http://www.kler.cn/a/455420.html

相关文章：

  • Mono里运行C#脚本11—do_load_header_internal
  • Go入门篇：（一）golang的安装和编辑工具安装
  • LeetCode2108 找出数组中的第一个回文字符串
  • 面试突击-JAVA集合类(持续更新...)
  • UE（虚幻）学习（三） UnrealSharp插件中调用非托管DLL
  • qt QZipReader详解
  • CSS盒子模型（溢出隐藏，块级元素和行级元素的居中对齐，元素样式重置）
  • 【Linux】Linux的基础工具
  • Maven Wrapper 报错“未找到有效的 Maven 安装”
  • java中logback怎么开启异步功能
  • 数据挖掘：定义、挑战与应用
  • framework踩坑：aosp/lineageos系统apk签名导出到as进行使用
  • SSL/TLS 深入浅出
  • SpringBoot（Ⅱ）——@SpringBootApplication注解+自动装配原理+约定大于配置
  • PHP高性能webman管理系统EasyAdmin8
  • C05S16-MySQL高可用
  • 天天 AI-241226：今日热点-OpenAI正研发实体机器人，终结者时代还是来了
  • 年会游戏策划
  • C++线程、并发、并行
  • SuperMap iDesktopX填补三维可视化地图海岸地形
  • MySQL 性能瓶颈,为什么 MySQL 表的数据量不能太大?
  • Vue axios 异步请求，请求响应拦截器
  • Hive SQL和Spark SQL的区别？
  • PHP实现登录和注册（附源码）
  • Java并发编程框架之综合案例—— 大数据分析工具(六)
  • Linux | Ubuntu零基础安装学习cURL文件传输工具