记一次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文件，在这里进行编辑，就能看见网页上的变化了，这里拿我之前编写的组件举例。

其中内容分为三大部分

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

当然也可以编写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…

前言