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

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

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源码：

 

Element-ui源码解析(一):项目目录解析的更多相关文章

  1. element ui源码解析 -- input篇

    el-input是element ui中使用最频繁的组件之一了,分析其构成从四个方面入手:DOM结构,属性,样式,事件入手 DOM结构: <div> <input /> < ...

  2. element ui源码解析 -- button篇

    要看源码就得从最简单的开始,button够简单的了,就从他开始吧. 安装依赖后源码目录在:node_modules/element-ui/packages中,可以看到这里的文件夹命名是不是很熟悉,就是 ...

  3. Element UI 源码—— Carousel 走马灯学习

    参考博客:https://segmentfault.com/a/1190000014384638?utm_source=tag-newest

  4. # 曹工说Spring Boot源码（10）-- Spring解析xml文件，到底从中得到了什么（context:annotation-config 解析）

    写在前面的话 相关背景及资源: 曹工说Spring Boot源码(1)-- Bean Definition到底是什么,附spring思维导图分享 曹工说Spring Boot源码(2)-- Bean ...

  5. Spring源码情操陶冶#task:scheduled-tasks解析器

    承接前文Spring源码情操陶冶#task:executor解析器,在前文基础上解析我们常用的spring中的定时任务的节点配置.备注:此文建立在spring的4.2.3.RELEASE版本 附例 S ...

  6. 曹工说Spring Boot源码（8）-- Spring解析xml文件，到底从中得到了什么（util命名空间）

    写在前面的话 相关背景及资源: 曹工说Spring Boot源码(1)-- Bean Definition到底是什么,附spring思维导图分享 曹工说Spring Boot源码(2)-- Bean ...

  7. 曹工说Spring Boot源码（9）-- Spring解析xml文件，到底从中得到了什么（context命名空间上）

    写在前面的话 相关背景及资源: 曹工说Spring Boot源码(1)-- Bean Definition到底是什么,附spring思维导图分享 曹工说Spring Boot源码(2)-- Bean ...

  8. 曹工说Spring Boot源码（12）-- Spring解析xml文件，到底从中得到了什么（context:component-scan完整解析）

    写在前面的话 相关背景及资源: 曹工说Spring Boot源码(1)-- Bean Definition到底是什么,附spring思维导图分享 曹工说Spring Boot源码(2)-- Bean ...

  9. Spring源码-IOC部分-Xml Bean解析注册过程【3】

    实验环境:spring-framework-5.0.2.jdk8.gradle4.3.1 Spring源码-IOC部分-容器简介[1] Spring源码-IOC部分-容器初始化过程[2] Spring ...

  10. springMVC源码分析--HandlerMethodReturnValueHandlerComposite返回值解析器集合（二）

    在上一篇博客springMVC源码分析--HandlerMethodReturnValueHandler返回值解析器(一)我们介绍了返回值解析器HandlerMethodReturnValueHand ...

随机推荐

  1. 劲（很）霸（不）酷（好）炫（用）的NLP可视化包：Dodorio 使用指北

    朋友们,朋友们,事情是这样的.最近心血来潮,突然想起很久以前看过的一个NLP可视化包.它的效果是下面这个样子: 在此之前,已经有一些文章从论文的角度对这个包进行了介绍,详情请见 推荐一个可交互的 At ...

  2. Mac + IOS + Safari 抓取网络请求

    第一步:打开苹果手机 设置>Safari浏览器>高级>网页检查器 第二步:打开 Mac 上的Safari浏览器>偏好设置>高级>在菜单栏中显示"开发&qu ...

  3. P1008 [NOIP1998 普及组] 三连击，置顶题解的问题

    题目链接: https://www.luogu.com.cn/problem/P1008 置顶题解 暴力,加简化的判断,数学原理,2个集合内所有数相加相乘结果一样,2个集合的内容一样(没错我自己编得, ...

  4. JUC并发编程原理精讲（源码分析）

    1. JUC前言知识 JUC即 java.util.concurrent 涉及三个包: java.util.concurrent java.util.concurrent.atomic java.ut ...

  5. 2022-07-09：总长度为n的数组中，所有长度为k的子序列里，有多少子序列的和为偶数？

    2022-07-09:总长度为n的数组中,所有长度为k的子序列里,有多少子序列的和为偶数? 答案2022-07-09: 方法一:递归,要i还是不要i. 方法二:动态规划.需要两张dp表. 代码用rus ...

  6. 2021-01-03：java中，描述一下什么情况下，对象会从年轻代进入老年代？

    福哥答案2021-01-03: 1.对象的年龄超过一定阀值,-XX:MaxTenuringThreshold 可以指定该阀值.2.动态对象年龄判定,有的垃圾回收算法,比如 G1,并不要求 age 必须 ...

  7. 2021-12-10：64位的浮点数和64位的有符号整数，哪个能表示的数据个数多？ A.整型多。 B.浮点型多。 C.与平台有关。 D.一样多。 来自qq群。

    2021-12-10:64位的浮点数和64位的有符号整数,哪个能表示的数据个数多? A.整型多. B.浮点型多. C.与平台有关. D.一样多. 来自qq群. 答案2021-12-10: 答案选A. ...

  8. 为什么有了 HTTP 还要 RPC

    哈喽大家好,我是咸鱼 随着互联网技术的发展,分布式架构越来越被人们所采用.在分布式架构下,为了实现复杂的业务逻辑,应用程序需要分布式通信实现远程调用 而这时候就需要一种协议来支持远程过程调用,以便实现 ...

  9. tkinter的Entry设置为不可编辑状态

    前 首先我们知道,tkinter中有许许多多的控件,其中使用频繁的控件之一就是Entry(输入框),那么怎么设置它为不可编辑状态呢? state选项 一般我们在写Entry的时候只传入了一个maste ...

  10. Python这样读写Excel数据，这样简直不要太粗暴！

    什么是xlrd&xlwt? xlrd和xlwt是Python语言中,读取和写入Excel数据的扩展工具.xlrd为xls文件read库,xlwt为xls文件write库.具体请看xlrd百度百 ...