关于阅读element-ui源码的一些体会

element-ui 语义化作的太好了，命名与功能对应的很是贴切

针对某个具体的组件的源码阅读的建议：

• 先看element-ui官网对应的文档；
• 对于.vue .js 引入的文件也须要理解;
• 在快速浏览一下组件的.vue文件，是本身对组件的基本结构有一个大体的了解；
• 在浏览一下.js文件，对事件多少有个影响；
• 在阅读时，留心本身的疑问，但不要死磕某个点，有些问题在了解组件的大体构成后，会很天然的获得答案；
• 在文档上ctrl+F搜索看下,看文章时对照文档，能够得到更多信息，文章不是文档不免省略一些文档上的信息；

调试element-ui官网demo的两种方式：

• 在官网的demo文档点击“在线运行”,能够在线编辑；
• 推荐：下载源码，将源码在本地运行起来，将element-ui官网运行在本地，能够直接修改examples/docs下的文档demo,重要的是修改源码可以直接反应在文档的demo中，便于理解源码；

npm install
npm run dev
复制代码

以el-dialog组件为例： 组件el-dialog的文档demo，element\examples\docs\zh-CN\dialog.md 组件源码：element-dev\packages\dialog\src\component.vue

最初的想法：

想阅读Element-UI 各个组件的方式来提升本身对vue api和高阶组件的掌握程度； 抽丝剥茧，逐渐深刻； 先从简单的组件开始吧，布局组件没有任何事件；

初见交互复杂组件

在阅读element-ui源码的过程当中发现，在复杂的组件中类、函数、mixins、provide   inject、抽象的工具类均有使用，一个组件关联的文件太多了，以我如今的文笔实在写不清楚，只好暂时总结下在阅读中发现的一些有趣的点，以自问自答的形式记录下来；

熟悉了几个复杂组件后

在看几个了复杂组件后，对element-ui组件的基本组织结构有了大致上的认知，总算造成了有结构的文字；

PS：看了黄轶老师的element-ui技术解密，本身也试着理解element-ui，把软件里的笔记整理一下；

To Be Contuine

布局组件el-col el-row

表单组件el-form el-form-item

全局组件message

管理弹窗组件的工具类Popup,结合组件el-dialg