阅读 7097

跟我一起编写Vue3版ElementUI

vue3已经RC版了,但是目前国内最流行的UI库还没有动静。 之前知识搞点简单的研究感觉还是要实战呀!!!

【Vue3新特性一篇搞懂】

【渐进式手敲Vue3.0框架 - 2万字以上 - 持续更新】

【10分钟体验Vue3全家桶(Vue3 + VueRouter4 + Vuex4)】

我们团队决定自己将ElementUI升级为3.0版本全面支持vue3.0

链接在此欢迎大家一起参与开源 github.com/kkbjs/eleme…

下面总结一下如何参加一个开源项目

一、提交PR的详细步骤

以下我把大体的步骤总结一下。

1. Fork代码

首先需要将vue代码通过github的fork功能复制一份到自己的github

github.com/kkbjs/eleme…

复制后的结果 github.com/su37josephx…

2. clone到本地

git clone git@github.com:su37josephxia/element3.git
复制代码

3. 安装依赖

# 设置国内镜像
yarn config set registry https://registry.npm.taobao.org
# --ignore-scripts  用于忽略chrome浏览器的下载
yarn install --ignore-scripts  
复制代码

4. 运行单元测试

# 强烈推荐大家全局安装
npm i jest -g 
npm run test:unit
复制代码

5. 开发前同步官方最新代码

fork代码后,如果kkb主库有更新,需要手动拉去同步。 这个过程应该是每天都需要做的事情

5.1 添加新远程分支

这个只需要做一次

git remote add upstream git@github.com:kkbjs/element3.git
复制代码

5.2 拉去合并远程分支到master分支

这个需要随时做 保持你的master分支永远是官方最新成果。

# 抓取源仓库修改 master分支
git fetch upstream master
# 切换分支
git checkout master
# 合并远程分支
git merge upstream/master
复制代码

6.功能点开发

6.1 选择功能点

目前Element还在开发的初期 目前的任务抚平vue2余vue3的语法差异,顺便重构一下代码结构,换用VTU进行单元测试。具体要求下一章会具体讲。 所以这次就选择了一个比较简单的组件作为演示Card

6.2 从master分支创建修改分支

git checkout -b Card
复制代码

6.3 开发代码

开发后的结果大概是这个样子 主要是重新编写了测试用例

import Card from '../Card.vue'
import { mount } from '@vue/test-utils'
describe('Card.vue', () => {
  describe('header', () => {
    it('text', () => {
      const wrapper = mount(Card, {
        props: {
          header: 'Header1'
        }
      })

      expect(wrapper.find('.el-card__header').text()).toBe('Header1')
    })

    it('slot', () => {
      const wrapper = mount(Card, {
        slots: {
          header: 'SoltHeader'
        }
      })

      expect(wrapper.find('.el-card__header').text()).toBe('SoltHeader')
    })
  })

  it('bodyStyle', () => {
    const wrapper = mount(Card, {
      props: {
        bodyStyle: { padding: '10px' }
      }
    })
    expect(wrapper.find('.el-card__body').attributes().style).toBe(
      'padding: 10px;'
    )
  })

  describe('shadow', () => {
    it('alwarys', () => {
      const wrapper = mount(Card, {
        props: {
          shadow: 'always'
        }
      })
      expect(wrapper.classes()).toContain('is-always-shadow')
    })

    it('hover', () => {
      const wrapper = mount(Card, {
        props: {
          shadow: 'hover'
        }
      })
      expect(wrapper.classes()).toContain('is-hover-shadow')
    })

    it('never', () => {
      const wrapper = mount(Card, {
        props: {
          shadow: 'never'
        }
      })
      expect(wrapper.classes()).toContain('is-never-shadow')
    })
  })
})

复制代码

6.4 伺服运行单个测试用例

在开发的过程中推荐一直开着测试用TDD的方式进行开发

jest packages/card --watch
复制代码

7 提交commit

这里面涉及到一个问题就是必须要按照官方需要的格式提交commit msg。不然那会被hooks进行自动检查拒绝你commit。 规约在此 github.com/conventiona…

git commit -am 'fix: update Card and test'
复制代码

github.com/kkbjs/eleme…

8 提出PR

划分开发分支

git checkout -b 'Card'
复制代码

提交分支

git commit -am 'fix: update Card and test'
复制代码

推送本地分支到github

git push --set-upstream origin Card
复制代码

如何合并多余commit

另外如果涉及多次提交会有一个要处理合并多个commit的问题。

TODO 近期更新

提PR

9 坐等胜利的好消息

提交完成后就可以随时关注 github.com/kkbjs/eleme… 坐等好消息了

欢迎大家参加开源是世界 贡献你的力量。

二、如何选择入手

目前代码还处于比较初级的阶段。 可以考虑和我一样先选择一个比较简单的组件进行。 大概要干以下三个事情。

01 重构代码结构

旧的代码文件名和结构不是很统一。目前需要重构成新的文件名和文件结构

可以参考 /packages/button

02 更新单元测试代码

新的组件单元测试统一使用vue-test-utils-next框架 可以参考旧的用例编写。

vue-test-utils-next框架参考资料

03 更新API

测试过程中如果发现组件功能需要修改就需要改用vue3的api进行修改。

04 如何将组件加入Demo页面

由于更改vue3后以前旧的组件会编译失败。所以项目中使用白名单进行控制。 组件修改后需要将组件名加入build-entry.js的白名单中。 运行

npm run dev
复制代码

浏览器中打开 http://0.0.0.0:8086

确认组件功能是否OK。

四、项目管理

如何使用看板 www.ruanyifeng.com/blog/2017/0…

三、参考资料

vue-test-utils-next框架参考资料

JEST基础

可以看一下这篇文章入个门。 juejin.im/post/684490…

覆盖率是什么

覆盖率 我们增加一个参数把覆盖率跑出来

npx jest --coverage 
复制代码

实际上跑覆盖率的时候是有错的 我们先不去管他 我们先解析一下这个报告怎么看,如果大家学过软件工程会知道一般从理论上讲覆盖率包括

语句覆盖 节点覆盖 路径覆盖 条件组合覆盖 但是一般来讲不同框架理解不一样 在Jest这里大概是这样分解的

%stmts是语句覆盖率(statement coverage)是不是每个语句都执行了?
%Branch分支覆盖率(branch coverage):是不是每个if代码块都执行了?
%Funcs函数覆盖率(function coverage):是不是每个函数都调用了?
%Lines行覆盖率(line coverage):是不是每一行都执行了?

组件一览表位置

/components.json

组件依赖表

组件子组件引用组件Inject组件
autocomplete-suggestionsElScrollbar
autocompleteElInput
date-tableelCalendar
calendarElButton
ElButtonGroup
cascader-panelElScrollbarpanel
ElCheckbox
ElRadio
cascaderElTag
ElScrollbar
ElCascaderPanel
panelpicker-dropdownElInput
ElButton
time-spinnerElScrollbar
date-rangeElInput
ElButton
date
month-rangeElInput
ElButton
time-selectElScrollbar
pickerElInput
dropdown-menudropdown
dropdownElButton
ElButtonGroup
form-itemelForm
label-wrapelForm
elFormItem
input-numberinput
menumenu-item-grouprootMenu
menu-itemElTooltip
message-boxElInput
ElButton
popconfirmElPopover
ElButton
selectoptionselect
selectElInput
ElTag
ElScrollbar
sliderbuttonElTooltip
mainElInputNumber
tablefilter-panelElCheckbox
ElCheckboxGroup
ElScrollbar
tableElCheckbox
tabsrootTabs
transferElButton
ElCheckboxGroup
ElCheckbox
treeElInput
ElCheckbox
uploadElProgressuploader
ElProgress