阅读 3941

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

前言

从老东家离职后,闲着没事,想到之前一个后台管理系统的需求,当时需要一个图片预览的组件,但是工程中使用的element-ui并没有这个组件,于是乎自己开始了这个组件的编写。

准备工作

首先将element-ui库fork到自己的git仓库,clone到本地。

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

projectDirectory

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

在开发之前当然得需要知道他们团队的开发规范啦,先看看element-ui贡献指南。

qq 20180814225150

qq 20180814225245

了解了这些后,就可以开始编码了。

开发步骤

准备环境

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

npm i yarn -g
复制代码

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

yarn
复制代码

生成目录

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

通过 make new 创建组件目录结构

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

qq 20180814234703

可以看见,执行make new 的时候呢,又执行了node命令,相当于间接的执行了node命令,那么我们可以跳过make的安装,直接使用相应的命令,node命令如下。

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

咱们先看看执行的这个new.js做了啥。

qq 20180814235028

通过这两行代码可以得知,需要通过命令行传入两个参数,第一个参数是组件的英文名,第二个参数是组件的中文名,使用如下命令就可以创建我们需要的文件。

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

看看发生了什么

qq 20180815000211

自动创建了如下文件,也就是你需要完善的代码,既然是编写组件,当然得能够在开发时同时预览以及debug,所以这时候就需要做如下步骤,先查看package.json,看看提供了那些script命令。

运行项目

qq 20180815000859

通过分析命令可以得知,开发环境下,需要运行dev命令,待工程运行后,打开浏览器,进入http://127.0.0.1:8085即可预览项目。

npm run dev
复制代码

qq 20180815001634

编写代码

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

2018-08-15_003404

其中内容分为三大部分

  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编写一个类型声明,大致的写法如下图

2018-08-18_154029

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

PR代码

到了这一步,代码基本上已经编写完成,通过测试以及编译后,就可以合并提交了,如果多次commit,得先用git rebase命令,将多次commit合并成一次,在贡献指南上也会看见这一提示,合并完成后先提交到自己的github仓库,然后提交pull request,之后会得到官方的回复,这里得赞下elm官方,每次都会有回复,且效率很高。

qq 20180818155129

被残忍拒绝(〒︿〒),所以当你决心要开发element-ui的组件前,先思考思考,element-ui有什么是目前没有,但是需要的组件。

结束语

虽然这次编写的组件并没有被官方采纳,但是通过这次组件的编写,学习到了很多知识,所以骚年,放手去做吧

更新

模仿element ui 搭建了一套vue组件开发webpack配置,可以在此基础上封装自己需要的功能

github.com/Richard-Cho…