element UI 源码学习 (1)前言

401 阅读1分钟

学习简介

element UI 是 Vue 框架 UI 库里面 star 数量最多的,我本人也使用过element UI 来进行开发项目,不过没有修改过源码开发。

最近打算再次学习一波,争取把组件库的设计原理搞清楚,提升一下自己的技术能力。以后少踩坑。

更新简介

我尽量按照一个组件一篇文章的形式,来学习和写作。当然了,如果简单的组件,也有可能两个组件一篇文章。

我会分析每个组件的作用,使用方法,项目结构,实现的原理。包括 JS 和 CSS 部分。当然了,CSS 部分可能较少涉及。

尽量一周更新两篇以上,更新十篇文章左右。如果有余力则写多一点。

项目结构

这是我下载的element UI 2.13.2版本的项目结构,其它版本的也是一样的。

build:packages 的配置文件。

examples: 项目组件的例子,包括组件 md 文档,demo等。

node_modules:根据 package.json下载的依赖。

packages:组件的源码,这是我们要学习的东西。下级还有一个theme-chalk文件夹,放置的是组件的 CSS 样式。

src:组件的入口(index.js),自定义指令(directives),语言的配置(locale),组件的混合文件(mixins),动画的配置(transitions),方法(utils)

test:测试文件

package.json:项目配置。