上篇回顾2.2-02 对比了 Vue 可变数据与 React 不可变数据两种哲学。本篇讲 UI 组件库——后端转前端搭管理后台的「最后一公里」。你不需要从零写表单、表格、弹窗用 Element Plus 或 Ant Design 能快速搭出专业界面。但「什么时候该封装业务组件、什么时候不该」是个重要的判断题。一、开篇从手写 CSS 到用组件库的转变后端工程师第一次写管理后台通常手写 HTML CSStabletrth名称/thth操作/th/trtrtdJava/tdtdbutton编辑/button/td/tr/table能用但丑。加 CSS 美化要写半天响应式、交互、校验全要手写。用 Element Plusel-table :datatableData stripe el-table-column propname label名称 / el-table-column label操作 template #default{ row } el-button clickedit(row)编辑/el-button /template /el-table-column /el-table自带样式、分页、排序、加载态。组件库的价值不是「好看」而是「把常见的交互模式封装成可复用的积木」。二、两大主流组件库维度Element PlusAnt Design框架Vue3React也有 Vue 版风格简洁、中后台专业、设计规范完善生态国内中后台主流国际化、大厂出品文档中文友好英文为主适合Vue 项目、国内业务React 项目、国际化业务选型建议Vue 项目用 Element PlusReact 项目用 Ant Design。三、按需引入tree-shaking 的价值3.1 全量引入的问题// 全量引入不推荐importElementPlusfromelement-plus;importelement-plus/dist/index.css;app.use(ElementPlus);打包体积 1MB大部分组件你没用到。3.2 按需引入// Vite 配置自动按需引入importAutoImportfromunplugin-auto-import/vite;importComponentsfromunplugin-vue-components/vite;import{ElementPlusResolver}fromunplugin-vue-components/resolvers;exportdefault{plugins:[AutoImport({resolvers:[ElementPlusResolver()]}),Components({resolvers:[ElementPlusResolver()]}),]};模板里直接用el-button构建时自动只打包用到的组件。体积从 1MB 降到几十 KB。四、三大高频场景的标准解法4.1 表单校验template el-form :modelform :rulesrules refformRef el-form-item label用户名 propusername el-input v-modelform.username / /el-form-item el-form-item label邮箱 propemail el-input v-modelform.email / /el-form-item el-button clicksubmit提交/el-button /el-form /template script setup import { ref, reactive } from vue; const formRef ref(); const form reactive({ username: , email: }); const rules { username: [ { required: true, message: 请输入用户名, trigger: blur }, { min: 3, max: 20, message: 长度 3-20, trigger: blur } ], email: [ { required: true, message: 请输入邮箱, trigger: blur }, { type: email, message: 邮箱格式错误, trigger: blur } ] }; const submit async () { await formRef.value.validate(); // 校验通过才继续 // 提交逻辑 }; /script4.2 表格分页template el-table :datatableData v-loadingloading el-table-column propname label名称 / el-table-column propcreatedAt label创建时间 / /el-table el-pagination v-model:current-pagepage.current v-model:page-sizepage.size :totalpage.total changeloadData / /template4.3 弹窗el-dialog v-modelvisible title编辑 el-form :modelform!-- 表单内容 --/el-form template #footer el-button clickvisible false取消/el-button el-button typeprimary clicksave保存/el-button /template /el-dialog五、主题定制与样式穿透5.1 CSS 变量定制:root{--el-color-primary:#409eff;--el-color-success:#67c23a;}5.2 样式穿透:deep组件库的内部元素有 scoped 样式外部改不了。用:deepstyle scoped :deep(.el-table .cell) { font-size: 14px; } /style六、二次封装什么时候该封、封什么6.1 该封装的场景重复组合同一个表格搜索分页组合用了 5 次以上业务规则所有表单的邮箱字段都有相同的校验提示统一风格全系统的按钮尺寸/颜色要一致6.2 不该封装的场景只用了 1~2 次封装的代价比直接写还大需求不稳定业务还在变封装后改起来更麻烦过度抽象把所有配置都做成 props组件比原版还复杂6.3 封装原则开放封闭!-- 好的封装固定业务部分开放其余 -- template el-table :datadata :columnscolumns !-- 业务固定分页、加载态内置 -- !-- 业务可变列配置、插槽透传 -- /el-table /template反面教材把 el-table 的所有 props 都透传一遍再加 20 个业务 props——这种封装比直接用 el-table 还复杂。七、小结表概念价值注意按需引入减小打包体积用 unplugin 自动化表单校验减少手写校验逻辑rules 写在 setup 里表格分页标准化列表交互v-model 双向绑定页码样式穿透改组件库内部样式用 :deep 不用 ::v-deep二次封装复用业务模式不过度封装