[toc]

Lecture11-Element Plus 组件库

1、本节讲什么

学会用现成的 UI 组件库 Element Plus 快速拼出按钮、表格、菜单、弹窗，避免手写大量样式和交互。它几乎是你后面所有页面的"零件库"。

2、概念速览

什么是 UI 组件库：别人做好的、现成的页面零件（按钮、表格、表单、弹窗），你直接拿来拼页面，不用手写样式和交互。

官网地址：一个 Vue 3 UI 框架 | Element Plus

类比：Element Plus 对前端，就像"预制构件"对盖房子——又快又统一，还自带好看的样式。

正确 vs 误区：组件库不是"模板页面"，而是"零件库"。你负责"用对零件 + 组织逻辑"，别想着自己造零件（尤其别为了"炫技"手写表格、弹窗）。

3、先看效果

先学会用 el-row / el-col 把页面划分成区域，再把各种组件放进这些区域——这是后台管理系统页面的地基。

① 安装

npm install element-plus

② main.ts 引入（全量引入，够用就行）

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
createApp(App).use(ElementPlus).mount('#app')

③ 布局定义：el-row + el-col（24 栅格）

<template>
  <!-- el-row 一行；el-col 一列。一行 = 24 格，span 控制每列占几格 -->
  <el-row :gutter="16">
    <el-col :span="8"><div class="box">占 8 格（1/3）</div></el-col>
    <el-col :span="16"><div class="box">占 16 格（2/3）</div></el-col>
  </el-row>
</template>

要点：

• 一行 = 24 格：所有 el-col 的 :span 加起来 = 24，就排满一行。
• :gutter 是列与列之间的间距。

④ 在 el-col 中引入组件：布局划分好后，把组件放进对应的列

<el-row :gutter="16">
  <el-col :span="12">
    <el-card>左侧放卡片组件</el-card>
  </el-col>
  <el-col :span="12">
    <el-button type="primary" @click="ElMessage.info('你点了我')">右侧放按钮</el-button>
  </el-col>
</el-row>

⑤ 表格示例：表格也放进布局的某一列

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
const rows = ref([
  { id: 1, name: '小红', age: 22 },
  { id: 2, name: '小李', age: 18 },
])
function del(row: { id: number; name: string }) {
  ElMessage.success(`准备删除 ${row.name}`)   // 顶部弹提示
}
</script>

<template>
  <el-row>
    <el-col :span="24">
      <el-table :data="rows">
        <el-table-column prop="id" label="ID" width="60" />
        <el-table-column prop="name" label="姓名" />
        <el-table-column prop="age" label="年龄" />
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button size="small" type="danger" @click="del(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>
</template>

4、照着做

1. 安装 Element Plus，在 main.ts 引入。
2. 先建一个布局：用 el-row / el-col 划分区域，改 :span 看布局怎么变（体会 24 栅格）。
3. 在 el-col 里放组件（el-button、el-card、el-table），把区域填满，拼成一个完整页面。
4. 体会"先用布局搭骨架，再把组件填进去"——后面后台管理系统（第 34 节起）就是这么搭的。

5、常见疑问

• Q：Element Plus 到底是什么？ A：一个现成的 Vue UI 组件库，把按钮、表格、弹窗、菜单都做好了，你只用"拿来拼"。绝大多数公司前端项目都在用类似的东西。
• Q：el- 开头的标签是啥？ A：Element Plus 提供的组件，像 <el-button>、<el-table>、<el-menu>。用法查官网：https://element-plus.org。
• Q：不会用某个组件怎么办？ A：去官网复制示例，或者直接让 AI 生成——你只需描述"我要一个带删除确认的表格"。AI 记得 Element Plus 的写法。
• Q：按需引入和全量引入选哪个？ A：教程用全量引入（一行 use(ElementPlus)）够用。项目大了再考虑按需引入（减少打包体积，第 27 节讲打包时提）。

补充：全局引入 Element Plus 图标

Element Plus 的图标是独立包 @element-plus/icons-vue，需要另外安装，再在 main.ts 里全局注册成组件，模板里才能直接用图标名。

① 安装

npm install @element-plus/icons-vue

② 在 main.ts 里全局注册所有图标

import * as ElementPlusIconsVue from '@element-plus/icons-vue'   // 引入全部图标

// 遍历，把每个图标注册成全局组件（组件名 = 图标名，如 Search、Edit、Delete）
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

③ 模板里直接用（必须包一层 el-icon，否则图标不显示）

<el-icon :size="20"><Search /></el-icon>
<el-button @click="onDelete"><el-icon><Delete /></el-icon></el-button>

• 图标必须包在 <el-icon> 里：<Search /> 只是 SVG 图标内容，本身没有尺寸/对齐样式；裸用会"看不见"。写法固定为 <el-icon><图标名 /></el-icon>。
• 图标名用大驼峰（Search、Edit、Delete、User），注册后全局直接用，不用每个组件单独 import。

④ 用按钮的 icon 属性（更简洁）：按钮组件支持 icon 属性直接写图标名，图标会自动放在文字左侧，不用再手写 <el-icon> 包裹：

<el-button type="success" icon="Check" @click="ElMessage.success('你点成功了')"></el-button>

• 前提：图标已全局注册（第②步），icon 属性会按组件名解析。
• 若图标没全局注册，则改成传组件对象：import { Check } from '@element-plus/icons-vue' 后写 :icon="Check"。

全局注册 vs 按需引入：

建议：学习/小项目用全局注册最方便；正式生产、对包体积敏感时改成组件内按需 import。

6、规范要点

• 通用组件优先用组件库，别自己写重复的样式和交互。
• 组件库全局引入了就统一用，别一半组件库一半手写，风格会乱。
• 告诉 AI"用 Element Plus 的 xx 组件"，它生成的代码风格就统一了。

7、本节验证

• 会用 el-row / el-col 按 24 栅格划分页面区域 ✅
• 会在 el-col 里放入 el-button、el-card、el-table 等组件 ✅
• 会用 el-table + el-table-column 展示表格数据 ✅
• 会安装并全局注册 Element Plus 图标（@element-plus/icons-vue）并在模板使用 ✅
• 知道 Element Plus 是“零件库”，通用组件优先用组件库 ✅