Penk的博客

环境状态vue版本：vue3是否使用 ts：是后台管理系统的网站，一个页面无非就是4个常用业务块头部的搜索栏table表格页脚新增编辑弹框那咋们是不是可以将其进行封装成组件呢？只需要传入一个配置文件就可以了~项目解构如下：封装后的展示图如下：如果能做成这样，是不是页面就会整洁很多？

Vue3+ts+element-plus 组件的二次封装-- el-table的二次封装，附带思路讲解以及源码。el-table的封装，通过json进行配置表单，可用插槽进行拓展。

环境状态vue版本：vue3是否使用 ts：是后台管理系统的网站，一个页面无非就是4个常用业务块头部的搜索栏table表格页脚新增编辑弹框那咋们是不是可以将其进行封装成组件呢？只需要传入一个配置文件就可以了~项目解构如下：封装后的展示图如下：如果能做成这样，是不是页面就会整洁很多？

环境状态vue版本：vue3是否使用 ts：是后台管理系统的网站，一个页面无非就是4个常用业务块头部的搜索栏table表格页脚新增编辑弹框那咋们是不是可以将其进行封装成组件呢？只需要传入一个配置文件就可以了~项目解构如下：封装后的展示图如下：如果能做成这样，是不是页面就会整洁很多？这边虽说是Form弹框，但是还是用到了elementUI的两个组件：1个是el-dialog，1个是el-form。通过JSON进行配置Form表单，实现高内聚低耦合

Vue3+element-plus+vite 组件的二次封装-- 新建npm打包项目，生成二次封装npm组件库。封装好的组件，只能在当前项目里面复用，如果其他项目也有类似的需求，除了可以copy外，还有发布到npm库中。npm包的样式文件也需要在pakeage.json中显式导出，不会有会报错！！！本地npm组件库测试。

Vue3+element-plus+vite 组件的二次封装-- 组件库发布到npm。1. Vue3+element-plus+vite 组件的二次封装，封装了头部的搜索条件栏，tabel栏，分页栏，form表单，都设置成了通过json可配置项，方便复用；2. 封装好了就开始打包，并且进行本地测试；3. 组件库发布到npm；4. 添加vitest单元测试框架；5. 添加vuepress文档。

vitest 跟 jest 是单元测试框架，他们只能在nodejs环境中测试；happy-dom 跟 jsdom 是一个没有图形用户界面的web浏览器的JavaScript实现；@vue/test-utils 是官方的底层组件测试库，用来提供给用户访问 Vue 特有的 API。@testing-library/vue （vue官方推荐使用~）也是基于此库构建的。

VitePress 是 VuePress 小兄弟, 基于 Vite构建。一个以 Vue 驱动的主题系统的简约静态网站生成工具，和一个为编写技术文档而优化的默认主题。它是为了支持 Vue 子项目的文档需求而创建的。组件库文档vitepress文档库

将生成vitepress 静态资源文档发布到Github pages以及Gitee pages，薅羊毛，免费静态站点。vitepress 文档已经完成了，这个章节，将讲述如何将文档发布到github 以及gitee 的pages 服务上。