Element-Plus 入门与整体布局

第11课 Element-Plus 入门与整体布局 干货笔记

• 在项目中安装并引入 Element-Plus（全量引入）
• 使用 el-container 家族搭建管理系统经典的三段式布局（顶栏+侧栏+主内容）
• 掌握查阅组件库文档的"三步法"
• 使用图标组件 el-icon 和按钮组件 el-button

---

1. Element-Plus 简介与引入

组件库：预封装好的一套 Vue 组件（按钮、表格、对话框等），带样式和交互，直接使用。

1.1 安装

npm install element-plus @element-plus/icons-vue

• element-plus：组件库本体
• @element-plus/icons-vue：图标包（独立，必须单独安装）

1.2 全量引入（main.js 三行代码）

import ElementPlus from 'element-plus'           // ① 组件本体
import 'element-plus/dist/index.css'              // ② 样式文件（漏掉则组件无皮肤）
app.use(ElementPlus)                              // ③ 注册

• 注意：③ 不能漏，② 不能忘。
• 全量引入后，所有 el- 开头的组件全局可用，无需额外导入。

1.3 按需引入与全量引入对比

方式	优点	缺点	场景
全量引入	配置简单，所有组件直接可用	打包体积大	学习、快速开发、中小项目
按需引入	打包体积小	需装插件和配置	追求性能的上线项目

---

2. 查阅组件文档的"三步法"

1. 找到：在官方文档左侧导航按功能分类找到组件（如 Basic → Button）。
2. 抄对：找到"基础用法"示例，复制代码到项目中跑通。
3. 改活：需要定制时，查看组件下方的属性表（Attributes）、事件（Events）、插槽（Slots），修改属性或事件。

属性表五列：属性名 / 说明 / 类型 / 可选值 / 默认值

---

3. el-container 布局容器家族

布局容器负责页面结构划分，共有 5 个成员：

组件	作用	默认尺寸
el-container	容器本体，嵌套其它容器组件	自适应
el-header	顶部栏	高 60px
el-aside	侧边栏	宽 300px
el-main	主内容区	剩余空间（自带滚动）
el-footer	底部栏	高 60px

3.1 嵌套规则

• el-container 的直接子元素 只能是 el-header、el-aside、el-main、el-footer 或另一个 el-container，不能放普通内容。
• 方向自动推断 ：
  • 子级中包含 el-header 或 el-footer → 自动纵向排列
  • 否则（如 el-aside + el-main）→ 横向排列
  • 可手动指定 direction="vertical" 或 "horizontal"

3.2 常用属性

• el-header：height="56px"（字符串，需带单位）
• el-aside：width="200px"（字符串，需带单位）
• el-main：无宽度/高度，自动占满

3.3 三段式布局核心代码结构

<el-container style="height: 100vh;">
  <el-header></el-header>
  <el-container> <!-- 内层横向 -->
    <el-aside width="200px"></el-aside>
    <el-main></el-main>
  </el-container>
</el-container>

• 外层容器必须给高度（如 height: 100vh），否则布局无法撑开。
• 内层 el-container 需要 flex: 1 占满剩余高度。

---

4. el-button 按钮常用属性

属性	可选值/类型	说明
type	primary / success / warning / danger / info	颜色语义
size	large / default / small	尺寸
round	boolean	圆角按钮
circle	boolean	圆形按钮
plain	boolean	浅色描边样式
disabled	boolean	禁用
icon	图标组件	按钮上的图标（需 :icon 绑定组件）

---

5. el-icon 图标组件

5.1 使用步骤

1. 从 @element-plus/icons-vue 按需引入图标组件：

   import { User, Search } from '@element-plus/icons-vue'

2. 在模板中用 <el-icon> 包裹：

   <el-icon><User /></el-icon>

5.2 调整大小和颜色

• 图标默认继承当前文字颜色和字号，可通过 CSS 修改：

  <el-icon style="font-size: 20px; color: #409eff;"><User /></el-icon>

5.3 图标作为按钮图标

<el-button :icon="Search">搜索</el-button>

• 注意 icon 属性接收的是组件对象，需动态绑定 :icon="Search"

---

6. 全局配置与主题

6.1 统一组件尺寸

使用 el-config-provider 包裹根组件，设置全局默认 size：

<template>
  <el-config-provider size="default">
    <router-view />
  </el-config-provider>
</template>

组件自身的 size 属性优先级更高。

6.2 CSS 变量换肤

Element-Plus 主题色基于 CSS 变量，可在全局样式中覆盖：

:root {
  --el-color-primary: #409eff; /* 主色 */
}

---

7. 改造主布局的核心步骤

将手写 flex 布局的主布局 MainLayout.vue 改为 Element-Plus 布局容器：

1. 外层容器 ：<el-container class="layout" style="height: 100vh"> 替代原来的根 div。
2. 顶部栏 ：<el-header height="56px" class="layout-header"> 替代 <header>，退出按钮改用 <el-button type="danger" plain size="small">。
3. 中段容器 ：内层 <el-container class="layout-body">（需 flex: 1 确保撑开）。
4. 侧边栏 ：<el-aside width="200px" class="layout-side"> 替代 <aside>。
5. 主内容区 ：<el-main class="layout-main"> 内含 <router-view />。
6. 清理旧样式：删除原手写的 flex、高度、宽度等布局 CSS（避免与组件自带样式冲突）。

---

8. 常见错误排查

现象	原因	解决
组件无样式（白板）	未引入样式文件 import 'element-plus/dist/index.css'	在 main.js 中补上
el-button 等组件未识别	未注册 app.use(ElementPlus)	检查注册代码
图标不显示	未安装 @element-plus/icons-vue 或未 import	检查安装和引入
布局方向不对（横排变竖排）	el-container 自动推断方向	手动指定 direction 属性
页面未撑满屏幕	外层容器未设高度；内层未给 flex:1	外层 height: 100vh，内层 flex: 1
侧边栏宽度无效	width 属性未带单位或写成了数字	必须写作 width="200px"
改造后样式错乱	旧的手写 CSS 残留，与组件样式冲突	删除原布局相关的 CSS

总结

• Element-Plus = Vue 的"精装修组件库"，三行代码全量引入即可使用所有组件。
• 布局容器 ：el-container + el-header/el-aside/el-main 快速搭建后台标准三段式，告别手写 flex。
• 文档查阅："找到 → 抄对 → 改活"三步法，是后续自学任何组件的核心能力。
• 图标是独立包，按需引入；按钮尺寸、颜色等通过属性控制；全局配置可使用 el-config-provider。