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

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

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. 【总结】从++i思考计算机原子性和线程安全

    在C++中,++i被认为是一种原子性操作,即不可分割的.不可中断的整体.它能够确保对变量的修改完整且正确,从而避免了数据竞争等问题,提高了程序的并发性和可靠性.然而,有些人可能会将原子性和线程安全混淆 ...

  2. Linux 内存管理 pt.1

    哈喽大家好,我是咸鱼 今天我们来学习一下 Linux 操作系统核心之一:内存 跟 CPU 一样,内存也是操作系统最核心的功能之一,内存主要用来存储系统和程序的指令.数据.缓存等 关于内存的学习,我会尽 ...

  3. Prism Sample 7 Module xaml

    这一节使用xaml标记甚为不解. 本节注册module 的方式同directory一节很类似.在那一节中,用工厂方法创建一模块目录: protected override IModuleCatalog ...

  4. ad-hoc实战

    ad-hoc实战 要求:利用Ansible搭建一个简易的作业网站,web端文件上传目录共享至nfs端,nfs的数据同步至backup 环境准备 主机名 主机角色 外网IP 内网IP m01 ansib ...

  5. 2023-04-13：给定一个字符串数组strs，其中每个字符串都是小写字母组成的， 如果i ＜ j，并且strs[i]和strs[j]所有的字符随意去排列能组成回文串， 那么说(i,j)叫做一个互补

    2023-04-13:给定一个字符串数组strs,其中每个字符串都是小写字母组成的, 如果i < j,并且strs[i]和strs[j]所有的字符随意去排列能组成回文串, 那么说(i,j)叫做一 ...

  6. 2023-01-05：konradkleine/docker-registry-frontend是registry的web界面工具之一。请问部署在k3s中，yaml如何写？

    2023-01-05:konradkleine/docker-registry-frontend是registry的web界面工具之一.请问部署在k3s中,yaml如何写? 答案2023-01-05: ...

  7. 2021-01-02：java中，MinorGC、MajorGC、FullGC 什么时候发生？

    福哥答案2021-01-02: MinorGC 在年轻代空间不足的时候发生.MajorGC 指的是老年代的 GC,出现 MajorGC 一般经常伴有 MinorGC.FullGC 老年代无法再分配内存 ...

  8. vue全家桶进阶之路38：Vue3 组件内部路由守卫

    在 Vue Router 中,可以为路由和路由组件注册全局的路由守卫,也可以在组件内部注册路由守卫. 组件内部的路由守卫有以下几种: beforeRouteEnter:在路由进入组件前被调用,但是在组 ...

  9. Python-3.10安装步骤

    下载地址: https://www.python.org/ftp/python/3.10.4/python-3.10.4-amd64.exe 安装:   C:\Users\liujun>pyth ...

  10. 2015年蓝桥杯C／C++大学B组省赛真题(加法变乘法)

    题目描述: 我们都知道:1+2+3+ ... + 49 = 1225 现在要求你把其中两个不相邻的加号变成乘号,使得结果为2015 比如: 1+2+3+...+10*11+12+...+27*28+2 ...