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

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

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. 【观察者设计模式详解】C/Java/JS/Go/Python/TS不同语言实现

    简介 观察者模式(Observer Pattern)是一种行为型模式.它定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新. 观察者模式使用三个类S ...

  2. C# 强行关闭其他软件对文件的占用

    using System.Diagnostics; // 获取占用文件的进程并强制结束 public void CloseProcessByFileName(string fileName) { Pr ...

  3. ts中接口

    前言:ts定义接口的任意一个属性 interface IPerson { name: string age: number family?: any[] // Error,因为不是任意类型的子集 [p ...

  4. 【Visual Leak Detector】核心源码剖析（VLD 1.0）

    说明 使用 VLD 内存泄漏检测工具辅助开发时整理的学习笔记.本篇对 VLD 1.0 源码做内存泄漏检测的思路进行剖析.同系列文章目录可见 <内存泄漏检测工具>目录 目录 说明 1. 源码 ...

  5. Costura.Fody 使用问题

    1. Costura.Fody 引用后,未能正常合并资源文件.用着用着就不行了 解决方案:在csproj所在的文件目录,找到FodyWeavers.xml,添加<Costura/> 1 & ...

  6. .gitignore 文件语法介绍

    .gitignore 文件的作用 A gitignore file specifies intentionally untracked files that Git should ignore. Fi ...

  7. 2022-09-16：以下go语言代码输出什么？A：101；B：100；C：1；D：2。 package main import ( “fmt“ ) type MS struct {

    2022-09-16:以下go语言代码输出什么?A:101:B:100:C:1:D:2. package main import ( "fmt" ) type MS struct ...

  8. 2022-05-03：Alice 和 Bob 再次设计了一款新的石子游戏。现有一行 n 个石子，每个石子都有一个关联的数字表示它的价值。给你一个整数数组 stones ，其中 stones[i] 是第

    2022-05-03:Alice 和 Bob 再次设计了一款新的石子游戏.现有一行 n 个石子,每个石子都有一个关联的数字表示它的价值.给你一个整数数组 stones ,其中 stones[i] 是第 ...

  9. Transformer 估算 101

    本文主要介绍用于估算 transformer 类模型计算量需求和内存需求的相关数学方法. 引言 其实,很多有关 transformer 语言模型的一些基本且重要的信息都可以用很简单的方法估算出来.不幸 ...

  10. 用go封装一下封禁功能

    用go封装一下封禁功能 本篇为用go设计开发一个自己的轻量级登录库/框架吧 - 秋玻 - 博客园 (cnblogs.com)的封禁业务篇,会讲讲封禁业务的实现,给库/框架增加新的功能. 源码:http ...