Element-ui源码解析(一):项目目录解析

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

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

 

1.如何下载原码

 随便开个项目

npm i element-ui -S

将源码下载到本地

随后在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源码：