elementUI改造第一天——我是如何改造element的

最近小编正与kkb的大佬，一起改造饿了么的element ui库，让他适配在vue3的环境。毕竟vue3也即将出来正式版，小编也是最近一直在学习关于vue3的composition api也想利用这个机会试炼一下。顺便试试VTU这个vue官方的测试框架。

从这篇文章你可以和小编一起学习到composition api的新的开发模式，以及在开发过程中遇到的问题，已经小编对组件封装的问题，以及如果更好的封装组件库，以及如何看懂组件库源码。

克隆仓库

分析目录

Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
d-----         2020/8/22     17:07                build         存放构建的脚本，包括webpack配置文件和一些node程序
d-----         2020/8/15     22:46                examples      elementUI官网示例
d-----         2020/8/15     22:46                packages      存放所有组件
d-----         2020/8/20     15:08                src           存放一些公共的函数，以及工具函数
d-----         2020/8/15     22:46                test          存放测试文件
d-----         2020/8/15     22:46                types         存放d.ts文件
...

分析脚本命令

"scripts":{
    "bootstrap": "npm i",
    "build:file": "node build/bin/iconInit.js & node build/bin/build-entry.js & node build/bin/i18n.js & node build/bin/version.js",
    "build:theme": "node build/bin/gen-cssfile && gulp build --gulpfile packages/theme-chalk/gulpfile.js && cp-cli packages/theme-chalk/lib lib/theme-chalk",
    "build:utils": "cross-env BABEL_ENV=utils babel src --out-dir lib --ignore src/index.js",
    "build:umd": "node build/bin/build-locale.js",
    "clean": "rimraf lib && rimraf packages/*/lib && rimraf test/**/coverage",
    "deploy:build": "npm run build:file && cross-env NODE_ENV=production webpack --config build/webpack.demo.js && echo element.eleme.io>>examples/element-ui/CNAME",
    "deploy:extension": "cross-env NODE_ENV=production webpack --config build/webpack.extension.js",
    "dev:extension": "rimraf examples/extension/dist && cross-env NODE_ENV=development webpack --watch --config build/webpack.extension.js",
    "dev": "npm run build:file && cross-env NODE_ENV=development webpack-dev-server --config build/webpack.demo.js & node build/bin/template.js",
    "dev:play": "npm run build:file && cross-env NODE_ENV=development PLAY_ENV=true webpack-dev-server --config build/webpack.demo.js",
    "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",
    "i18n": "node build/bin/i18n.js",
    "lint": "eslint example/**/* src/**/* test/**/* packages/**/* build/**/* --quiet --fix",
    "pub": "npm run bootstrap && sh build/git-release.sh && sh build/release.sh && node build/bin/gen-indices.js && sh build/deploy-faas.sh",
    "test": "npm run lint && npm run build:theme && cross-env CI_ENV=/dev/ BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
    "test:watch": "npm run build:theme && cross-env BABEL_ENV=test karma start test/unit/karma.conf.js",
    "test:unit": "jest"
}

上面太乱了，解释写道下面，这里只写我用到的命令

bootstrap 安装依赖
build:file 自动构建全局导入的JS文件src/index.js，这里有个小坑可以看改文档
build:theme 构建主题，这个应该是在编辑scss后需要执行的命令，暂时改造还没使用过，css路径packages/theme-chalk
build:umd 构建纯浏览器端的组件
clean 情况打包后的文件
dev 开启开发模式，在启动后可以在浏览器打开本地的elementUI的实例官网
dev:play 开启某个组件的开发模式，这也是我常用的命令，在这里可以单独开发某个组件，目录在examples/play/index.vue
dist 执行所有build的命令
test:unit 进行单元测试

要求

使用composition api开发
编写单元测试文件/packages/*/__tests__/*.spec.js

准备

node最新版
npm/yarn
会vue3的composition api

开始

首先使用yarn或者npm i`安装依赖。

然后执行yarn dev:play来运行examples/play/index.vue这个demo

在这个demo中写一个使用实例，可以直接粘贴官方的实例如Radio的第一个实例

<template>
  <el-radio v-model="radio" label="1">备选项</el-radio>
  <el-radio v-model="radio" label="2">备选项</el-radio>
</template>

<script>
  export default {
    data () {
      return {
        radio: '1'
      };
    }
  }
</script>

然后创建packages/radio/Radio.vue文件,修改packages/radio/index.js里组件的路径，开发分析旧文件代码，旧文件在packages/radio/src/radio.vue

当我打开这个文件的时候有一点点懵，其实大多时候主要是改js部分的代码，但还是遇到了以下的问题：

tabIndex是什么？
标签中role和aria-*是什么？
vue3的双向数据绑定与vue2不一样了？
Emitter这个库是干啥的？

.......

等等的很多问题，所以第一步就是先补充自己的知识盲区

tabIndex是什么，tabindex是控制tab键定位的一个属性，如果为-1表示不可通过tab键定位，如果为>=0的话是允许使用tab键定位，这里需要注意的一点就是，在值相同的情况下，他会先定位值为0的元素，然后在定位值为1的元素。

role大概意思是给这一类标签起一个名字，而aria-*是无障碍相关的属性。

以上两个问题就是在写该组件的开始前遇到的知识盲区。接下来 第二步 就是踩坑环节，因为要用vue3，虽然官方保留了了大多数vue2的特性，但是有些细节还是不一样。

首先是vue3的数据双向绑定有了些许变化，vue2是通过value这个props来接收双向绑定的变量的值，而如果改变这个绑定的变量是通过input事件将改变和值传给父元素，然后将值赋值给绑定的变量；而vue3默认是通过modelValue这个props来绑定接收变量，然后通过update:modelValue这个事件来改变绑定的变量的值,这个和vue2的.sync的实现原理类型，说了这么多的废话，还不如上代码来的实在：

vue2
<template>
    <input :value="value" @input="$emit('input', $event)" />
</template>
<script>
export default{
    props:{
        value:String,
    },
}
</script>

vue3
<template>
    <input :value="modelValue" @input="$emit('update:modelValue', $event)" />
</template>
<script>
export default{
    props:{
        modelValue:String,
    },
}
</script>

上面就是vue2和vue3的双向绑定区别，但是当你这样写后在运行后会发现在console里报了一个warn，简单的翻译后发现vue3居然出现了一个新的选项 emits 在简单的查阅文档后得知，这是一个用于声明事件的一个新选项，他的作用和props有点相似，props是声明要传入的属性的，而emits是声明要发出的事件的，props和emits他们其实还有另一个用途就是当作活文档，更多的emis和props的内容可以看vue3的网站v3.vuejs.org

<template>
    <input :value="modelValue" @input="$emit('update:modelValue', $event)" />
</template>
<script>
export default{
    props:{
        modelValue:String,
    },
    emits:['update:modelValue'],
}
</script>

我们添加了emits后刷新页面，查看console成功的消除了一个warn。

vue3还有一个很大改动，就是vue3是没有 $on、$ off、$once 这三个函数的。

改造

我使用的方法是从简单到困难,逐步进行开发，首先就是在不修改template的情况下实现最基本的单选框功能。然后逐步的看一下原来的代码来增加功能，最后就是将功能包装为一个一个的useXXX的函数来向外暴露事件和状态。如何在写的过程中查看效果，你可以执行yarn dev:play来运行examples/play/index.vue这个文件，在这个文件里使用你写的这个组件，来查看效果。

测试

因为这个项目，我第一次用到了测试这个知识，虽然以前了解过，但仅仅就是了解了一下

在这个项目中真正的第一次使用，也学习了VTU这个vue的测试框架

其实测试也是很简单的，你可以查看之前写好的demo然后看着他们的风格写

但是在写测试脚本的时候是要站在一个用户的角度进行测试，测试还是以使用为中心就行测试

然后运行测试文件，都PASS后就可以改文档了

改文档

主要是修改进度表和网站上的demo代码，这里有一个坑，不对这里有好几个坑

首先就是如果在使用dev:play命令进行测试的时候，如果不能直接使用组件的话那就说明

在src/index.js文件里没有组件你的组件，而这个文件是通过build:file来生成的

而生成这个文件的js脚本是build/bin/build-entry.js ，大约在72行左右的代码

你需要把你写的那个组件的名字加到那个数组里，然后执行yarn build:file或者npm run build:file

然后就可以直接使用了，虽然也可以直接导入测试，但是这里最终不是要解决这里的问题，而是在demo中是使用全局导入的

如果你不这样操作最后就无法在demo上呈现

说到demo,这里也有一个坑，你会发现在执行dev这个命令打开网站后没有呈现，而你已经将上述的问题解决

但是还是没有呈现，这里有个非常魔幻的坑就是，你需要把md文件里的样例的template标签删除后才能显示，这个就非常魔幻

当你删除template这个标签后就可以显示了，然后就是修改细节文档，最后就可以提交了

提交

我大约花了两天的时间写完了radio这个组件

但是在提交的时候又踩了一个坑，因为在提交之前会自动触发测试命令，如果测试不通过后就无法提交

因为这个项目不是从零开始的项目，以前遗留的测试文件他还会运行，但是因为有些组件还没改

所以就测试不通过，所以就无法提交，这时候就需要看他的报错了，他这里提示是加上--no-verity这个参数后就可以不验证提交了

还需要注意的是提交文本的规范是 组件名: 完成的事情 都是使用英文

最后提交成功，然后就是PR

之前我一直认为PR是在对方仓库进行，后来发现不是

PR需要在你Fork的仓库里进行，然后成功PR，等待大佬review

等了两天后成功的通过了PR，我也是非常激动的，因为这是我第一次PR

总结

首先是大型项目肯定要遵守一些规范的，毕竟这个代码是要很多人看嘛

而且测试文件也是非常重要的，你写好测试文件后相当于是你的安全墙，在出现大的问题后第一时间就报错了