前言

在传统的构建页面布局时，我们通常都是使用一个个的div标签再辅以相应的css代码来控制容器的定位，实现页面的整体布局，这样写出的代码会显得非常臃肿，并且页面的美观性较差。为了解决这个问题饿了么团队打造出了一款极其优雅且上手容易的Vue组件库--Element Plus。

Vue 3 应用开发中，Element Plus 担当了关键角色，它是一款精心设计的用户界面组件库。旨在加速开发流程，Element Plus 集成了多样化的 UI 组件与高级特性，赋能开发者高效创作出界面精美、性能优越的网页应用程序。文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/16582.html

下面我将以一个例子来为大家展示一下Element Plus的强大之处。文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/16582.html

准备工作

在使用element-plus前，我们需要先在Vue项目中安装element-plus的依赖。成功创建vue项目后，在控制台输入指令:文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/16582.html

npm install element-plus --save

安装完毕后我们可以看到在package.json文件中会多出一个element-plus的依赖。文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/16582.html

文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/16582.html

如有安装失败的朋友们可以参考，element-plus的官方文档文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/16582.html

安装 | Element Plus (element-plus.org)文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/16582.html

下面我将以一个后台管理系统的主页面demo来为大家演示element-plus组件库的基本使用文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/16582.html

demo展示

假如，今天你的老板要求你开发一个页面结构这样的页面你会怎么做？文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/16582.html

在没有了解到element-plus之前，我觉得大部分人都会使用div标签将页面分为3个部分，aside,header,main。这样自己手搓轮子非常耗时，且效率低下。有了element-plus组件库之后，我们可以直接使用别人造好的轮子拿到自己的页面中来使用，这样可以节省至少70%的时间。文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/16582.html

下面我们来到element-plus的官方文档，找到Container布局容器,里面有多种已经封装好的页面结构，我们可以直接选择需要的样式，复制代码到我们的项目中使用。

在本demo中，使用的是该布局的结构：

点击复制源代码即可将代码转移到我们的项目中，这样我们就可以在此结构的基础上进行调整，使之符合我们的项目要求。

下面，我们复制该代码，使用此页面结构，根据自己的demo要求调整后代码如下：

<template>
    <div class="common-layout">
        <el-container>
            <el-aside width="200px">
                <el-menu default-active="2" class="el-menu-vertical-demo" router="true">
                    <el-sub-menu index="1">
                        <template #title>
                            <el-icon>
                                <location />
                            </el-icon>
                            <span>Navigator One</span>
                        </template>
                        <el-menu-item index="/home">首页</el-menu-item>
                        <el-menu-item index="1-2">账号详情</el-menu-item>
                    </el-sub-menu>
                    <el-menu-item index="2">
                        <el-icon><icon-menu /></el-icon>
                        <span>Navigator Two</span>
                    </el-menu-item>
                    <el-menu-item index="3" disabled>
                        <el-icon>
                            <document />
                        </el-icon>
                        <span>Navigator Three</span>
                    </el-menu-item>
                    <el-menu-item index="4">
                        <el-icon>
                            <setting />
                        </el-icon>
                        <span>Navigator Four</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-container>
                <el-header>后台管理系统</el-header>
                <el-main>
                    <RouterView></RouterView>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup>

</script>

<style lang="css" scoped>
.common-layout {
    height: 100vh;
}

.el-container {
    height: 100%;
}

.el-header {
    background-color: #4091ff;
    line-height: 60px;
    font-size: 20px;
    color: #fff;
    font-weight: bold;
}

.el-aside {
    background-color: #4091ff;
}

:deep(.el-menu) {
    background-color: #4091ff;
}

.el-menu-item {
    color: #fff;
}
</style>

该demo展示了一个基于 Vue 3 和 Element Plus 的基本布局结构，用于构建一个具有侧边导航栏、顶部标题栏及主要内容区域的后台管理系统。以下是核心组成部分的总结：

1. 模板 (Template) :
   • 使用了 Element Plus 的布局组件 (el-container, el-aside, el-header, el-main) 来构建页面布局。
   • el-aside 区域包含一个垂直菜单 (el-menu)，用于导航。菜单项包括子菜单 (el-sub-menu) 和普通菜单项 (el-menu-item)，并利用图标 (el-icon) 增强视觉效果。
   • el-header 显示系统标题“后台管理系统”，采用蓝色背景。
   • el-main 区域用于显示动态路由内容 (RouterView)，即根据路由变化加载不同的页面组件。
2. 样式 (Style) :
   • 定义了全局容器高度为视口高度 (100vh)，确保布局充满全屏。
   • 自定义类 .common-layout 用于设置整体布局容器样式。
   • 菜单和头部背景色均设置为相同的蓝色 (#4091ff)，文字颜色为白色 (#fff)，以保持视觉一致性。
   • 使用 :deep() 选择器穿透 scoped 样式，以便直接修改 Element Plus 组件内部的 .el-menu 背景色。

这段代码构建了一个具有响应式导航功能的后台管理界面框架，遵循了清晰的模块化和组件化设计理念，便于维护和扩展。