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

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

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. AI降临，前端启用面壁计划

    作者:京东零售 郑炳懿 开篇: "在我们有生之年,你觉得会看到AI兵临城下的那一天吗?就像电影黑客帝国里面演的一样",Barry从红色的烟盒里取出一根烟发问道. "不可能 ...

  2. [Pytorch框架] 3.3 通过Sin预测Cos

    文章目录 3.3 通过Sin预测Cos 3.3 通过Sin预测Cos %matplotlib inline import torch import torch.nn as nn from torch. ...

  3. [C++提高编程] 3.1 string容器

    文章目录 3.1 string容器 3.1.1 string基本概念 3.1.2 string构造函数 3.1.3 string赋值操作 3.1.4 string字符串拼接 3.1.5 string查 ...

  4. 【Python基础】集合的基本使用

    Python中的集合是一种无序且唯一的数据结构.集合是通过花括号{}或者set()函数来创建的. 创建集合 s = set() 声明空集合 s = {1,2,3,4,5} 声明非空集合 添加元素 s. ...

  5. 2022-04-16：在一个10^6 * 10^6的网格中， source = [sx, sy]是出发位置，target = [tx, ty]是目标位置， 数组blocked是封锁的方格列表，被禁止的

    2022-04-16:在一个10^6 * 10^6的网格中, source = [sx, sy]是出发位置,target = [tx, ty]是目标位置, 数组blocked是封锁的方格列表,被禁止的 ...

  6. 2021-05-13：数组中所有数都异或起来的结果，叫做异或和。给定一个数组arr，返回arr的最大子数组异或和。

    2021-05-13:数组中所有数都异或起来的结果,叫做异或和.给定一个数组arr,返回arr的最大子数组异或和. 前缀树.一个数,用二进制表示,0走左边分支,1走右边分支. 时间复杂度:O(N). ...

  7. Selenium - 元素定位(2) - XPATH进阶

    Selenium - 元素定位 XPATH 定位进阶 元素示例 属性定位 # xpath 通过id属性定位 driver.find_element_by_xpath("//*[@id='kw ...

  8. status能否设置为布尔值类型，前端采用复选框形式

    是的,可以将status设置为布尔类型,这样可以在前端使用复选框形式展示.在模型中的定义可以如下: class Acceptance(models.Model): # ... status = mod ...

  9. Djnago常用命令

    pip: bundle,创建包含多个包的pybundles:freeze,显示所有已安装的包:help,显示可用命令:install,安装包:search,搜索PyPi:uninstall,卸载包:u ...

  10. 基于Sentinel自研组件的系统限流、降级、负载保护最佳实践探索

    作者:京东物流 杨建民 一.Sentinel简介 Sentinel 以流量为切入点,从流量控制.熔断降级.系统负载保护等多个维度保护服务的稳定性. Sentinel 具有以下特征: 丰富的应用场景:秒 ...