当前位置：首页 > news >正文

elementui from表单提交_跟我一起编写Vue3版ElementUI

news 来源：原创 2024/5/3 19:20:04

vue3已经RC版了，但是目前国内最流行的UI库还没有动静。我们团队决定自己将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框架参考资料

API文档 github.com/vuejs/vue-t…
源码 github.com/vuejs/vue-t…

03 更新API

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

三、参考资料

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

API文档 github.com/vuejs/vue-t…
- 源码 github.com/vuejs/vue-t…

JEST基础

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

覆盖率是什么

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

npx jest --coverage
复制代码

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

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


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