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

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

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. Linux 根据名称自动kill掉当前相关进程

    ps aux | grep app | grep -v "grep" | awk '{print $2}' | xargs -r kill

  2. LeetCode 双周赛 103（2023/04/29）区间求和的树状数组经典应用

    本文已收录到 AndroidFamily,技术和职场问题,请关注公众号 [彭旭锐] 提问. 大家好,我是小彭. 这场周赛是 LeetCode 双周赛第 103 场,难得在五一假期第一天打周赛的人数也没 ...

  3. MASA MinimalAPI源码解析：为什么我们只写了一个app.MapGet,却生成了三个接口

    源码解析:为什么我们只写了一个app.MapGet,却生成了三个接口 1.ServiceBase 1.AutoMapRoute 源码如下: AutoMapRoute自动创建map路由,MinimalA ...

  4. Centos7 部署Django项目 uwsgi + nginx

    启动 首先确保你的django项目是可以在虚拟环境中跑起来的,环境管理窝用的是pyenv,pyenv不知道什么东西的可以参考窝之前写过的Pyenv环境管理的安装文. 项目启动 python manag ...

  5. uni-app介绍

    "优你"框架 uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS.Android.Web(响应式).以及各种小程序(微信/支付宝/ ...

  6. 代码随想录算法训练营Day12 栈与队列

    代码随想录算法训练营 代码随想录算法训练营Day12 栈与队列| 239. 滑动窗口最大值  347.前 K 个高频元素  总结 239. 滑动窗口最大值 给定一个数组 nums,有一个大小为 k 的 ...

  7. 前端自动识别CAD图纸提取信息方法总结

    前言 CAD图纸自动识别和提取信息具有许多意义,包括以下几个方面: 提高工作效率:传统上,对于大量的CAD图纸,人工识别和提取信息是一项耗时且繁琐的任务.通过自动化这一过程,可以大大提高工作效率,节省 ...

  8. SQL注入原理及利用方式

    前言 在Web表单递交或输入域名或页面请求的查询字符串,通过后端语言连接数据库并查询数据,攻击者可利用此漏洞拼接恶意语句获取大量数据. SQL注入漏洞 在表单页面或者存在参数传递的地方可能存在SQL注 ...

  9. 7-9 《Fibonacci 数列》

    7-9 <Fibonacci 数列> 思路:吃过前面<序列求和>问题的亏 但还是要尝试一下循环大法 Fn=Fn-1+Fn-2 定义int型 aFn-1 , bFn-2 , cF ...

  10. 如何获取 C#程序 内核态线程栈

    一:背景 1. 讲故事 在这么多的案例分析中,往往会发现一些案例是卡死在线程的内核态栈上,但拿过来的dump都是用户态模式下,所以无法看到内核态栈,这就比较麻烦,需要让朋友通过其他方式生成一个蓝屏的d ...