对elementui总体设计分析-------引用

1.需求分析

丰富的 feature：丰富的组件，自定义主题，国际化。

文档 & demo：提供友好的文档和 demo，维护成本小，支持多语言。

安装 & 引入：支持 npm 方式和 cdn 方式，并支持按需引入。

工程化：开发，测试，构建，部署，持续集成。

丰富的 feature

丰富的组件

组件库最核心的仍是组件，先来看一下 element-ui 组件的设计原则：一致、反馈、效率、可控。具体的解释在官网有，我就很少贴了，在 element-ui 开发团队背后，有一个强大的设计团队，这也得益于 element-ui 的创始人 sofish 在公司的话语权和地位，争取到这么好的资源。因此 element-ui 组件的外型、配色、交互都作的很是不错。

做为一个基础组件库，还有一个很重要的方面就是组件种类丰富。element-ui 官方目前有 55 个组件，分红了 6 大类，分别是基础组件、表单类组件、数据类组件、提示类组件、导航类组件和其它类型组件。这些丰富的基础组件能很好地知足大部分 PC 端 to B 业务开发需求。

开发这么多组件，须要大量的时间和精力，因此这里要很是感谢 element-ui 团队，为咱们提供了这些基础组件，咱们基于它们作二次开发，节约了很是多的时间。

element-ui 的组件源码在 packages 目录里维护，而并不在 src 目录中。这么作并非为了要采用 monorepo，我也并无找到 lerna 包管理工具，这么作的目的我猜想是为了让每一个组件能够单独打包，支持按需引入。但实际上想达到这个目的也并不必定须要这么去组织维护代码，我更推荐把组件库中的组件代码放在 src/components 目录中维护，而后经过修改 webpack 配置脚本也能够作到每一个组件单独打包以及支持按需引入，源码放在 src 目录老是更合理的。

自定义主题

element-ui 的一大特点是支持自定义主题，你可使用在线主题编辑器，能够修改定制 Element 全部全局和组件的 Design Tokens，并能够方便地实时预览样式改变后的视觉。同时它还能够基于新的定制样式生成完整的样式文件包，供直接下载使用，那么它是如何作到这点的呢？

element-ui 组件的样式、公共样式都在 packages/theme-chalk 文件中，而且它是能够独立发布的。element-ui 组件样式中的颜色、字体、线条等等样式都是经过变量的方式引入的，在 packages/theme-chalk/src/common/var.scss 中咱们能够看到这些变量的定义，这样就给作多主题提供了方便，由于我只要修改这些变量，就能够实现组件的主题改变。

了解了基本原理，作在线替换主题也并非难事了，我并不会详细去讲在线定制主题前端交互部分，感兴趣的同窗能够本身去看源码，都在 examples 目录中，我这里只说一下本质的原理。

想要作到在线换肤，而且实时预览，须要借助 server 的帮助，好比主题能够经过一个配置去维护，用户作一系列操做后，会生成新的主题配置，把这个配置经过接口提交的方式告诉 server，而后 server 会根据这个配置作返回生成新的 CSS（具体的实施的方案未开源，大体会作一些变量替换，而后编译），新的 CSS 的样式就会覆盖默认的样式，达到了切换主题的目的。

安装&引入

实际上 element-ui 会把全部组件打包生成一份 CSS 和 JS，官方也提供了例子：

1. <!-- 引入样式 -->

2. <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

3. <!-- 引入组件库 -->

4. <script src="https://unpkg.com/element-ui/lib/index.js"></script>

工程化

前端对于工程化的要求愈来愈高，element-ui 做为一个组件库，它在工程化方面作了哪些事情呢？

首先是开发阶段，为了保证你们代码风格的一致性，使用了 ESLint，甚至专门写了 eslint-config-elemefe 做为 ESint 的扩展规则配置；为了方便本地开发调试，借助了 webpack 并配置了 Hot Reload；利用模块化开发的思想把组件依赖的一些公共模块放在了 src 目录，并依据功能拆分出 directives、locale、mixins、transitions、utils 等模块。

其次是测试方面，使用了 karma 测试框架，为每个组件编写了单元测试，而且利用 Travis CI 集成了测试。

接着是构建方面，element-ui 编写了不少 npm scripts，以 dist 这个 script 为例：

"dist": "npm run clean && npm run build:file && npm run lint && webpack --config build/webpack.conf.js && webpack --config build/webpack.common.js && webpack --config build/webpack.component.js && npm run build:utils && npm run build:umd && npm run build:theme"

它内部会依次执行多个命令，最终会生成 lib 目录和打包后的文件。我并不打算介绍全部的命令，感兴趣同窗可自行研究，这里我想介绍一下 build:file 这个 script 作的事情：

"build:file": "node build/bin/iconInit.js & node build/bin/build-entry.js & node build/bin/i18n.js & node build/bin/version.js",

这里会依次执行 build/bin 目录下的一些 Node 脚本，对 icon、entry、i18n、version 等作了一系列的初始化工做，它们的内容都是根据一些规则作文件的 IO，这么作的好处就是彻底经过工具的手段自动化生成文件，比人工靠谱且效率更高，这波操做很是值得咱们学习和应用。

最后是部署，经过 pub 这个 npm script 完成：

"pub": "npm run bootstrap && sh build/git-release.sh && sh build/release.sh && node build/bin/gen-indices.js && sh build/deploy-faas.sh"

主要是经过运行一系列的 bash 脚本，实现了代码的提交、合并、版本管理、npm 发布、官网发布等，让整个发布流程自动化完成，脚本具体内容感兴趣的同窗可自行查看

总结

至此，element-ui 的组件库的总体设计介绍完毕，能够看到除了这些丰富的组件背后，还有很完整的一套解决方案，不少经验都值得咱们学习和借鉴，不完美的地方也值得咱们去思考，其中有不少技术细节能够深刻挖掘。