记一次element-ui组件开发经历

前言

从老东家离职后，闲着没事，想到以前一个后台管理系统的需求，当时须要一个图片预览的组件，可是工程中使用的element-ui并无这个组件，因而乎本身开始了这个组件的编写。

准备工做

首先将element-ui库fork到本身的git仓库，clone到本地。

先看看element-ui的主要的工程目录结构。

+-- build  工程脚手架配置文件
|
+-- examples 工程文档目录，也就是element-ui官网
|
+-- lib 执行打包后的文件
|
+-- packages 各个组件所在的目录，也是接下来开发的重点
|
+-- src element-ui工程中各个公用文件，包含了入口文件
|
+-- test 测试用例文件目录
|
+-- types typescript声明文件目录
复制代码

在开发以前固然得须要知道他们团队的开发规范啦，先看看element-ui贡献指南。

了解了这些后，就能够开始编码了。

开发步骤

准备环境

首先将npm的使用转换为yarn，安装命令以下。

npm i yarn -g
复制代码

使用yarn安装工程依赖文件。

yarn
复制代码

生成目录

到了这个步骤，准备工做基本完成，先看看上图的组件开发规范，其中提到一点。

经过 make new 建立组件目录结构

据个人了解，这个make命名呢，并非npm包提供的，这个工具的主要做用是给开发c++的人员提供便利的，windows平台下安装较为麻烦，因此咱们直接看makefile文件。

能够看见，执行make new 的时候呢，又执行了node命令，至关于间接的执行了node命令，那么咱们能够跳过make的安装，直接使用相应的命令，node命令以下。

node build/bin/new.js $(filter-out $@,$(MAKECMDGOALS))
复制代码

我们先看看执行的这个new.js作了啥。

经过这两行代码能够得知，须要经过命令行传入两个参数，第一个参数是组件的英文名，第二个参数是组件的中文名，使用以下命令就能够建立咱们须要的文件。

node build/bin/new.js test-component '测试组件'
复制代码

看看发生了什么

自动建立了以下文件，也就是你须要完善的代码，既然是编写组件，固然得可以在开发时同时预览以及debug，因此这时候就须要作以下步骤，先查看package.json，看看提供了那些script命令。

运行项目

经过分析命令能够得知，开发环境下，须要运行dev命令，待工程运行后，打开浏览器，进入http://127.0.0.1:8085便可预览项目。

npm run dev
复制代码

编写代码

这时，在组件列表页就可以看到你新建立的组件了，那么该如何编写这个页面呢，答案就在自动建立的md文件中，打开element/examples/docs/zh-CN/test-component.md文件，在这里进行编辑，就能看见网页上的变化了，这里拿我以前编写的组件举例。

其中内容分为三大部分

1. 可执行的脚本文件，图片上部用script脚本包裹的部分
2. demo文件，图片中部用```html包裹的部分，其中template包裹的代码最终会被渲染至页面上，而script部分仅仅只是文本示例，并不会执行，执行的是图片上部的script脚本
3. 参数选项说明，位于图片下部

固然也能够编写style代码，用于改变组件渲染后在页面展示的样式

了解了这一步骤，就能够开始业务代码的编写了，打开element/packages/test-component/src/main.vue，这个是业务逻辑所在的文件，这篇文章的重点不是教你如何编码，而是理解element-ui的开发流程，因此这里不详细讲解代码，以前我开发的完整代码能够点击这里查看，其中包含了js代码、css代码、测试用例、以及typescript声明文件。

测试用例

一个完善的工程，固然少不了测试用例，在我看来，单元测试的意义在于，测试好当前你开发的业务逻辑，以便于往后工程维护时，能及时发现错误，减小维护成本。element-ui使用的是mocha测试框架以及chai断言库, 由于工程已经搭建好，因此对于开发人员的学习成本很低，只须要学习chai断言库的使用就好，关于chai断言库的使用，看这里, 这里不教你如何编写测试用例，具体须要测试哪些功能，相信你看了element-ui其余组件的测试用例，本身也可以领悟到的。

typescript声明文件

由于并非很懂typescript，因此通过短暂的学习ts，大体了解到，ts声明文件的做用是，为不是ts编写的库，提供一个库中的开放的api的类型声明，主要的作用应该是为了编辑器可以理解库中开放的api，提供一个智能提示的做用，若有不对，还请指出。

因此你须要作的是，将你编写的组件中，动态传入的参数以及开放的api编写一个类型声明，大体的写法以下图

能够看见，每一个函数对于传入的参数以及返回的类型进行了一个类型声明。

PR代码

到了这一步，代码基本上已经编写完成，经过测试以及编译后，就能够合并提交了，若是屡次commit，得先用git rebase命令，将屡次commit合并成一次，在贡献指南上也会看见这一提示，合并完成后先提交到本身的github仓库，而后提交pull request，以后会获得官方的回复，这里得赞下elm官方，每次都会有回复，且效率很高。

被残忍拒绝(〒︿〒)，因此当你决心要开发element-ui的组件前，先思考思考，element-ui有什么是目前没有，可是须要的组件。

结束语

虽然此次编写的组件并无被官方采纳，可是经过此次组件的编写，学习到了不少知识，因此骚年，放手去作吧

更新

模仿element ui 搭建了一套vue组件开发webpack配置，能够在此基础上封装本身须要的功能

github.com/Richard-Cho…