Element Plus 组件库相关技术揭秘

本文涉及到的知识点：npm 包的原理以及 npm install 的原理，接着是 .vue 文件的编译原理，rollup 的使用，ESM、CommonJS、UMD 等模块规范，只有熟悉这些才能打好包

Form 表单应该是我们使用最多的组件了，所以我们有必要对它的实现原理进行了解。例如：动态表单组件的时候是怎么验证的？

文本通过由浅入深逐步实现一个前端两大阵营React和Vue都离不开的表单验证工具库 mini-async-validator，旨在在实现的过程中彻底掌握前端的设计模式之策略模式，以及一些重构的手法。

本文将探讨 v-model 在 Vue3 底层中的实现原理，也顺便探讨自定义指令的实现原理。v-model`本质上是一个语法糖，通过 v-model 我们可以很方便快捷地实现数据的双向绑定。

从受控组件的角度来讲v-model的本质就是把一个组件变成一个受控组件。从双向数据绑定的角度来说v-model的本质就是在实现双向数据绑定。

Element Plus 的 CSS 架构思想主要还是 OOCSS，也就是还是面向对象的思想，即：封装、继承、多态，并且 CSS 变量的加入使用，使得多态这一特性的实现更加丝滑。

什么是CSS系统颜色，什么是暗黑模式，以及怎么设置暗黑模式，如何通过 CSS 变量实现一键换肤，从而理解CSS系统颜色和暗黑模式的关系及意义。

通过 Button 组件的实现，我们学习 Vue3 的相关知识，比如父子组件之间的通讯方式，可以通过 props，可以通过 emit，还可以通过插槽，隔代组件之间则可以通过provide和inject

peerDependencies 表示同版本依赖，简单来说就是，如果你安装我，那么你最好也安装我对应的依赖。peerDependencies 中定义的依赖不会重复下载，但会要求宿主提供一致 peer

通过实现 Icon 组件进行理解 Element Plus 组件实现的基本原理，Icon 组件虽然简单，但它却包含了一个组件的全部基础流程。

本文通过 OOCSS、BEM、ITCSS等CSS 架构思想进行剖析 Element Plus 中的 CSS 架构思想，并且学习了 SCSS 的高级用法。

我们从终端命令的执行流程开始了解 npm run 的执行原理，接着在了解 npm install 的执行过程引出幽灵依赖的问题，通过对幽灵依赖的了解，我们更清楚地了解了 npm 包管理工具的发展和演变

实现代码规范自动化可以解放团队生产力，提升团队生产效率。既然代码规范自动化可以带来如此的好处，我们自然要好好了解它并且掌握它。通过这些工具进行代码自动化检查，让开发者可以完全聚焦业务开发。

任何工具我们都只有理解它的原理才能真正地掌握它，所以下面我们将从 ESLint 的原理剖析开始吧。近半个月的啃源码的研究结果：ESLint 修复源码的方式居然仅是使用 slice 函数对源码进行截取替

工程化的核心并非工具，而是以工具为实现媒介进行规范工作流程。文章中实现的是组件库项目文件组织结构的规范，TypeScript 编译和类型检测流程的规范，还有工具链的统一。

通过手写实现了一个 Vue3 组件是如何从诞生到渲染到页面上的整个过程，再深入理解 Vue3 全局组件和局部组件的实现原理及插件的实现原理，从而理解 Vue3 组件库的设计和实现原理。