阅读源码入门实践系列之 element ui(1)

1

为啥要写本篇？

有好几个小伙伴问我如何去阅读源码？如何成为开源项目贡献者？ 短暂思考后先带你入门，回答第一部分

ps: 这篇不是告诉你如何理解每部分内容，会说个主要过程，然后写一个组件来说明这个事情

怎么拿到源码？

2

1、 上github 搜索 element

2、去官网 然后 找到入口

https://github.com/ElemeFE/element

3、拿到本地

git clone git@github.com:ElemeFE/element.git

4、跑起来（安装依赖 yarn/npm i , 暂不跑）

3

如何读源码？

这个网上有很多的思路，此处 仅展示我的思路

方法

0、最好看源码之前，使用过这个产品 比如 element ui

1、先看文件夹主要结构 先看 package.json 重点关注 script 里面的内容 告诉你怎么跑脚本

2、看 src 然后 找 index.js 入口文件

3、找到 单个组件 比如 此处以 Button 组件为例

4、主要看 主体 如何 封装 templete，然后 事件怎么向上抛出的 $emit ,这两块 我相信都能看懂啥意思

5、scss 在哪里 ？

6、常量定义在哪里 ？

7、写完之后 test 测试 写在哪里 ？

8、其他部分先不仔细说明了

index.js 入口文件

Button 组件为例

scss 在哪里 ？

常量定义在哪里 ？

test 测试 测试这种类型 就是非常 经典的 jest 测试写法

按照这种思路写一个？

4

这个组件为初版本，请勿较真，仅做学习讨论，自然有很多优化点（详细代码请到 github 自取）

5

结果展示 ？

6、更多思考？

2

1、需要考虑 封装为公共组件

2、需要将结构进一步简化

3、将css 可以抽离出去

4、可以将这个组件分成多个小组件 再组合起来

......

什么，你还很激动 ？

7

欢迎去主页 快乐 追文， 更多快乐 ，敬请期待 ......

github(点个 star 你会变得更强（不会秃）)

感谢 持续支持 马克付！！！

https://github.com/huanhunmao/Juejin_article_sync