最近小编正与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是没有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
总结
首先是大型项目肯定要遵守一些规范的，毕竟这个代码是要很多人看嘛
而且测试文件也是非常重要的，你写好测试文件后相当于是你的安全墙，在出现大的问题后第一时间就报错了
网友评论