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

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

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. Vue中实现数据列表无缝轮播

    类似这种滚动轮播效果 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta char ...

  2. taro-ui Calendar 修改星期开始时间为星期一（中国格式）

    官网Calendar文档:http://taro-ui.jd.com/#/docs/calendar 日历虽然兼容性很高,小程序也能使用,但扩展性并不高,如果需要更强的样式/自定义,需要复制部分源码到 ...

  3. Android JetPack~LiveData(二) 数据倒灌问题

    Android数据绑定技术一,企业级开发 Android数据绑定技术二,企业级开发 Android  JetPack~ DataBinding(数据绑定)(一)    集成与使用 Android  J ...

  4. Nuxt3.0中使用EChart可视化图表📊

    在Nuxt3.0项目中用到了可视化图表,于是我用了EChart可视化图表库.但是在官网我没有找到针对在Nuxt3.0中使用EChart的方法,于是在这里记录我的引入EChart并简单使用的步骤.需要声 ...

  5. MySQL对时间戳的格式化

    时间转时间戳 select unix_timestamp('2022-02-22 22:22:22'); 时间戳转时间 select from_unixtime(1645539742); 格式化 SE ...

  6. 2022-05-28：某公司计划推出一批投资项目。 product[i] = price 表示第 i 个理财项目的投资金额 price 。 客户在按需投资时，需要遵循以下规则： 客户在首次对项目 pr

    2022-05-28:某公司计划推出一批投资项目. product[i] = price 表示第 i 个理财项目的投资金额 price . 客户在按需投资时,需要遵循以下规则: 客户在首次对项目 pr ...

  7. Netty（1）——NIO基础

    本篇主要介绍Java NIO的基本原理和主要组件 Netty是由JBOSS提供的Java开源网络应用程序框架,其底层是基于Java提供的NIO能力实现的.因此为了掌握Netty的底层原理,需要首先了解 ...

  8. vue全家桶进阶之路26：Vue.js 3.0与Vue.js 2.x 的比较和注意事项

    Vue.js 3.0 是 Vue.js 框架的最新版本,于 2020 年 9 月正式发布.Vue.js 3.0 主要的改进和新特性包括: 更好的性能:Vue.js 3.0 使用了更快的虚拟 DOM 实 ...

  9. vue全家桶进阶之路20：ECMAScript脚本语言规范

    ECMAScript(简称 ES)是一种由 Ecma 国际组织定义的脚本语言标准,它定义了 JavaScript 语言的基本规范和特性.JavaScript 是一种基于 ECMAScript 标准的编 ...

  10. Qt数据可视化项目

    一.创建项目(步骤按常规来即可) 二.ui设计界面 控件的使用 默认视角:Label标签和horizontalSlider标签 水平旋转:Label标签和horizontalSlider标签 垂直旋转 ...