小编点评

**准备工作** 1. 下载原代码：使用 npm 命令下载 Element UI 的源代码：``` npm i element-ui -S ``` 2. 找到代码：代码主要位于 `node_modules\element-ui\packages` 目录中。 3. 目录结构解析： - `1.lib`：编译后的 JavaScript 和 CSS 文件，用于发布和部署版本。 - `2.packages`：组件的源代码，每个组件独立存放。 - `3.src`：包含所有库的源代码，包括通用的代码、工具函数和全局配置文件。 - `4.types`： TypeScript 类型定义文件，提供类型提示和类型检查支持。 **寻找代码** 1. 在 `node_modules\element-ui\packages` 目录中搜索组件的名称。例如，要寻找“button”组件的源代码，搜索 “button”。 2. 在代码中查找组件的路径。例如，对于“button”组件，路径将是 `node_modules\element-ui\packages\src\components\button\index.js`。 3. 访问代码的 URL 即可获取该组件的源代码。

正文

开始看原码了,我们要开始一些准备工作,

既然是拆代码,那么我们要先把代码搞到手

 

1.如何下载原码

 随便开个项目

将源码下载到本地

随后在node_modules中找到element-ui文件夹

 

开搞

 

2.目录结构解析

目录结构如下：

1.lib：该目录包含了 Element UI 库的编译后的可用文件，通常用于发布和部署的版本。

它包含了 JavaScript 和 CSS 文件，以及一些字体和图标资源。

2.packages：该目录包含了 Element UI 库的源代码，每个组件都单独分布在一个目录中。

这些目录包含了组件的 JavaScript 文件和样式文件以及其他相关文件，用于组件的开发和扩展。

3.src：该目录包含了 Element UI 库的整体源代码。它包含了一些通用的代码、工具函数以及一些全局配置文件。

4.types：该目录包含了 Element UI 库的 TypeScript 类型定义文件。

这些文件用于给开发者提供类型提示和类型检查的支持，以增强项目的可维护性和开发效率。

 

3.找到我想要的源码

然后我们尝试着去找源码，比如我想看button的源码

那么我们去packages目录下去找,(直接搜索也行,直接搜索组件的名字去掉el)

组件的原码：

 

css源码：