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

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

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

  • 先看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.vuenpm

最初的想法:

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

初见交互复杂组件

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

熟悉了几个复杂组件后

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

PS:看了黄轶老师的element-ui技术解密,本身也试着理解element-ui,把软件里的笔记整理一下;函数

To Be Contuine

布局组件el-col el-row工具

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

全局组件messagepost

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

相关文章
相关标签/搜索