从零手搓一个 Element Plus

引子

经过一个月的准备，我的高仿 Element-plus 组件库项目，终于初步告一段落。在接下来的日子，我将开始录制开发过程的分享视频。希望可以帮助到有需要的小伙伴。

点击 Eric-UI (ericwxy.github.io) 查看组件文档

分享初衷

在这个信息化飞速发展的时代，前端开发已经成为软件开发中不可或缺的一部分。而组件库作为提升开发效率、保证项目质量的重要工具，一直是前端领域的热门话题。
随着 大模型的快速发展，普通的 CRUD 程序员被 AI 取代是肉眼可见的趋势。所以个人觉得需要更加复杂的项目经验，以及架构设计能力才能不被 AI 那么早的“抢饭碗”。

关于组件库

以上是组件库的文档链接，该组件库是基于 Vue3 + Typescript 封装的高仿 Element-plus 组件库。
其中用到了以下的技术

• monorepo 的项目管理方式
• Vitest 单元测试
• Vitepress 书写组件
• github actions 实现 自动化部署组件文档
• 运用 大模型 辅助设计以及开发

下面是组件库文档中的组件列表

技术亮点

从组件的列表可以看出，这次选择复刻的 Element 组件是很有代表性的。

• 通过 Loading 、Message、MessageBox、Notification 组件可以很好的诠释指令式调用组件的封装方式，我们也知道在日常的业务开发当中我们封装的 Vue 组件大部分都是申明式调用的。
• Loading 组件提供 service 和 directive(vue 指令) 两种调用方式，可以进一步了解 vue 指令的封装方法。
• 在 上面的 Loading、Message 等一些列反馈组件中 运用 自定义 hooks（组合式API） 的方式封装了对 z-index 的 计算，以及 Message 、 Notification 组件的弹出位置计算。
• 通过 对 popper.js 的封装 实现了 Tooltip 、Dropdown 、PopConfirm 这一类组件的功能。
• 在 Dropdown/DropdownItem 以及 Select/Option 、ButtonGroup/Button 、Form/FormItem 这类父子组件嵌套使用的场景，运用 依赖注入的方式来共享上下文信息。
• 使用 async-validator 来封装表单的校验功能。

除了以上列到的这些还有很多有意思的点，在后面的视频里我都会详细分享的。

这么样是不是干货满满，希望可以帮助到需要提上 vue 水平的小伙伴，我们共同进步。