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