跟我一起编写Vue3版ElementUI

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

一、提交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.cn/post/684490…


覆盖率是什么


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


npx jest --coverage


实际上跑覆盖率的时候是有错的 我们先不去管他 我们先解析一下这个报告怎么看,如果大家学过软件工程会知道一般从理论上讲覆盖率包括语句覆盖 节点覆盖 路径覆盖 条件组合覆盖 但是一般来讲不同框架理解不一样 在Jest这里大概是这样分解的


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


组件一览表位置


/components.json


组件依赖表


组件 子组件 引用组件 Inject组件
autocomplete-suggestions ElScrollbar
autocomplete ElInput
date-table elCalendar
calendar ElButton
ElButtonGroup
cascader-panel ElScrollbar panel
ElCheckbox
ElRadio
cascader ElTag
ElScrollbar
ElCascaderPanel
panel picker-dropdown ElInput
ElButton
time-spinner ElScrollbar
date-range ElInput
ElButton
date
month-range ElInput
ElButton
time-select ElScrollbar
picker ElInput
dropdown-menu dropdown
dropdown ElButton
ElButtonGroup
form-item elForm
label-wrap elForm
elFormItem
input-number input
menu menu-item-group rootMenu
menu-item ElTooltip
message-box ElInput
ElButton
popconfirm ElPopover
ElButton
select option select
select ElInput
ElTag
ElScrollbar
slider button ElTooltip
main ElInputNumber
table filter-panel ElCheckbox
ElCheckboxGroup
ElScrollbar
table ElCheckbox
tabs rootTabs
transfer ElButton
ElCheckboxGroup
ElCheckbox
tree ElInput
ElCheckbox
upload ElProgress uploader
ElProgress


相关文章
|
24天前
|
缓存 JavaScript UED
Vue3中v-model在处理自定义组件双向数据绑定时有哪些注意事项?
在使用`v-model`处理自定义组件双向数据绑定时,要仔细考虑各种因素,确保数据的准确传递和更新,同时提供良好的用户体验和代码可维护性。通过合理的设计和注意事项的遵循,能够更好地发挥`v-model`的优势,实现高效的双向数据绑定效果。
126 64
|
24天前
|
JavaScript 前端开发 API
Vue 3 中 v-model 与 Vue 2 中 v-model 的区别是什么?
总的来说,Vue 3 中的 `v-model` 在灵活性、与组合式 API 的结合、对自定义组件的支持等方面都有了明显的提升和改进,使其更适应现代前端开发的需求和趋势。但需要注意的是,在迁移过程中可能需要对一些代码进行调整和适配。
104 60
|
24天前
|
前端开发 JavaScript 测试技术
Vue3中v-model在处理自定义组件双向数据绑定时,如何避免循环引用?
Web 组件化是一种有效的开发方法,可以提高项目的质量、效率和可维护性。在实际项目中,要结合项目的具体情况,合理应用 Web 组件化的理念和技术,实现项目的成功实施和交付。通过不断地探索和实践,将 Web 组件化的优势充分发挥出来,为前端开发领域的发展做出贡献。
29 8
|
23天前
|
存储 JavaScript 数据管理
除了provide/inject,Vue3中还有哪些方式可以避免v-model的循环引用?
需要注意的是,在实际开发中,应根据具体的项目需求和组件结构来选择合适的方式来避免`v-model`的循环引用。同时,要综合考虑代码的可读性、可维护性和性能等因素,以确保系统的稳定和高效运行。
24 1
|
23天前
|
JavaScript
Vue3中使用provide/inject来避免v-model的循环引用
`provide`和`inject`是 Vue 3 中非常有用的特性,在处理一些复杂的组件间通信问题时,可以提供一种灵活的解决方案。通过合理使用它们,可以帮助我们更好地避免`v-model`的循环引用问题,提高代码的质量和可维护性。
33 1
|
24天前
|
JavaScript
在 Vue 3 中,如何使用 v-model 来处理自定义组件的双向数据绑定?
需要注意的是,在实际开发中,根据具体的业务需求和组件设计,可能需要对上述步骤进行适当的调整和优化,以确保双向数据绑定的正确性和稳定性。同时,深入理解 Vue 3 的响应式机制和组件通信原理,将有助于更好地运用 `v-model` 实现自定义组件的双向数据绑定。
|
1月前
|
JavaScript 索引
Vue 3.x 版本中双向数据绑定的底层实现有哪些变化
从Vue 2.x的`Object.defineProperty`到Vue 3.x的`Proxy`,实现了更高效的数据劫持与响应式处理。`Proxy`不仅能够代理整个对象,动态响应属性的增删,还优化了嵌套对象的处理和依赖追踪,减少了不必要的视图更新,提升了性能。同时,Vue 3.x对数组的响应式处理也更加灵活,简化了开发流程。
|
1月前
|
JavaScript 数据管理 Java
在 Vue 3 中使用 Proxy 实现数据双向绑定的性能如何?
【10月更文挑战第23天】Vue 3中使用Proxy实现数据双向绑定在多个方面都带来了性能的提升,从更高效的响应式追踪、更好的初始化性能、对数组操作的优化到更优的内存管理等,使得Vue 3在处理复杂的应用场景和大量数据时能够更加高效和稳定地运行。
61 1
|
27天前
|
JavaScript 前端开发 API
从Vue 2到Vue 3的演进
从Vue 2到Vue 3的演进
39 0
|
27天前
|
JavaScript 前端开发 API
Vue.js响应式原理深度解析:从Vue 2到Vue 3的演进
Vue.js响应式原理深度解析:从Vue 2到Vue 3的演进
54 0