前言 📖 在公司经常接触到后台管理系统的开发，基本上 90% 以上都是 table 页面，业务逻辑也基本上一样。刚开始也想的是找一个基于 element 二次封装的 el-table

作为一个前端开发，精通Vue、React、Node.js等单词书写，职业Ctrl+C、Ctrl+V使用者，怎么能不会UI组件的二次封装！下面我将详细的介绍二次组件开发，请各位准备好键盘的 Ctrl+C

前言 📖 一、在线预览 👀 Link：https://admin.spicyboy.cn 二、Git 仓库地址 (欢迎 Star⭐⭐⭐) Gitee：https://gitee.com/laramie

layout是整个后台管理系统的核心，最主要的逻辑是menu菜单与路由的规则及渲染，这一块又涉及到权限管理的知识，弄懂这一块基本上弄懂了后台管理系统的一半重点。

前言：对于一个业务前端来讲，工作中用的最多的组件我觉得大概率是table组件了，只要是数据展示就不可避免地用到这个组件。用久了就有点熟悉，就来锻炼自己的封装能力，为了更好的搬砖，封装table组件。

本文分别使用 SFC（模板方式）和 tsx 方式对 Element Plus *el-menu* 组件进行二次封装，实现配置化的菜单，有了配置化的菜单，后续便可以根据路由动态渲染菜单。 ## 1 数据

万字长文讲述基于 Vue + Vite + Element-Plus + TypeScript 从0到1搭建真实企业级后台管理系统前端模板，配套Java 、Node 后端源码。

上篇table 表格封装 讲到项目中经常会用到 table 表格，所以做了封装。当然，form 表单使用的频率依然很高，所以和封装 table 表格的思路相似，对 form 表单也做了一个二次封

前言 使用Vue3+Vite+TS基于Element plus 二次封装业务组件，注册挂载为全局使用，代码简洁了许多。封装好我们的业务组件今后开发中遇到时，就可以直接使用啦！ 一、初始化vite项目