第11课 Element-Plus 入门与整体布局 干货笔记在项目中安装并引入 Element-Plus全量引入使用el-container家族搭建管理系统经典的三段式布局顶栏侧栏主内容掌握查阅组件库文档的“三步法”使用图标组件el-icon和按钮组件el-button1. Element-Plus 简介与引入组件库预封装好的一套 Vue 组件按钮、表格、对话框等带样式和交互直接使用。1.1 安装npminstallelement-plus element-plus/icons-vueelement-plus组件库本体element-plus/icons-vue图标包独立必须单独安装1.2 全量引入main.js三行代码importElementPlusfromelement-plus// ① 组件本体importelement-plus/dist/index.css// ② 样式文件漏掉则组件无皮肤app.use(ElementPlus)// ③ 注册注意③ 不能漏② 不能忘。全量引入后所有el-开头的组件全局可用无需额外导入。1.3 按需引入与全量引入对比方式优点缺点场景全量引入配置简单所有组件直接可用打包体积大学习、快速开发、中小项目按需引入打包体积小需装插件和配置追求性能的上线项目2. 查阅组件文档的“三步法”找到在官方文档左侧导航按功能分类找到组件如 Basic → Button。抄对找到“基础用法”示例复制代码到项目中跑通。改活需要定制时查看组件下方的属性表Attributes、事件Events、插槽Slots修改属性或事件。属性表五列属性名 / 说明 / 类型 / 可选值 / 默认值3.el-container布局容器家族布局容器负责页面结构划分共有 5 个成员组件作用默认尺寸el-container容器本体嵌套其它容器组件自适应el-header顶部栏高 60pxel-aside侧边栏宽 300pxel-main主内容区剩余空间自带滚动el-footer底部栏高 60px3.1 嵌套规则el-container的直接子元素只能是el-header、el-aside、el-main、el-footer或另一个el-container不能放普通内容。方向自动推断子级中包含el-header或el-footer→ 自动纵向排列否则如el-asideel-main→ 横向排列可手动指定directionvertical或horizontal3.2 常用属性el-headerheight56px字符串需带单位el-asidewidth200px字符串需带单位el-main无宽度/高度自动占满3.3 三段式布局核心代码结构el-containerstyleheight:100vh;el-header/el-headerel-container!-- 内层横向 --el-asidewidth200px/el-asideel-main/el-main/el-container/el-container外层容器必须给高度如height: 100vh否则布局无法撑开。内层el-container需要flex: 1占满剩余高度。4.el-button按钮常用属性属性可选值/类型说明typeprimary/success/warning/danger/info颜色语义sizelarge/default/small尺寸roundboolean圆角按钮circleboolean圆形按钮plainboolean浅色描边样式disabledboolean禁用icon图标组件按钮上的图标需:icon绑定组件5.el-icon图标组件5.1 使用步骤从element-plus/icons-vue按需引入图标组件import{User,Search}fromelement-plus/icons-vue在模板中用el-icon包裹el-iconUser//el-icon5.2 调整大小和颜色图标默认继承当前文字颜色和字号可通过 CSS 修改el-iconstylefont-size:20px;color:#409eff;User//el-icon5.3 图标作为按钮图标el-button:iconSearch搜索/el-button注意icon属性接收的是组件对象需动态绑定:iconSearch6. 全局配置与主题6.1 统一组件尺寸使用el-config-provider包裹根组件设置全局默认sizetemplateel-config-providersizedefaultrouter-view//el-config-provider/template组件自身的size属性优先级更高。6.2 CSS 变量换肤Element-Plus 主题色基于 CSS 变量可在全局样式中覆盖:root{--el-color-primary:#409eff;/* 主色 */}7. 改造主布局的核心步骤将手写 flex 布局的主布局MainLayout.vue改为 Element-Plus 布局容器外层容器el-container classlayout styleheight: 100vh替代原来的根 div。顶部栏el-header height56px classlayout-header替代header退出按钮改用el-button typedanger plain sizesmall。中段容器内层el-container classlayout-body需flex: 1确保撑开。侧边栏el-aside width200px classlayout-side替代aside。主内容区el-main classlayout-main内含router-view /。清理旧样式删除原手写的 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属性未带单位或写成了数字必须写作width200px改造后样式错乱旧的手写 CSS 残留与组件样式冲突删除原布局相关的 CSS总结Element-Plus Vue 的“精装修组件库”三行代码全量引入即可使用所有组件。布局容器el-containerel-header/el-aside/el-main快速搭建后台标准三段式告别手写 flex。文档查阅“找到 → 抄对 → 改活”三步法是后续自学任何组件的核心能力。图标是独立包按需引入按钮尺寸、颜色等通过属性控制全局配置可使用el-config-provider。