组件库地址:ssh://git@git.newcapec.cn:6022/PerfectDigConn/frontEndService/oreo-ui.git
以开发一个Button组件为例(开发之前必须熟悉Button组件的的每个文件的功能)
-
拉取开发分支 git clone -b v2.x-dev ssh://git@git.newcapec.cn:6022/PerfectDigConn/frontEndService/oreo-ui.git(最好确保每次开发前都重新拉取此分支)
-
建立Button分支 git checkout -b Button
-
使用npm run cpt命令根据提示生成一个Button组件
-
步骤三会在src/packages下面生成一个button文件夹,button组件的源码都在这个里面
-
对非src/packages/button/目录下的所有文件的修改必须通知所有开发人员
-
全局的样式在src/style/目录
-
静态资源路径在src/assets/
-
工具类函数在src/utils
-
组件开发使用jsx
-
测试代码在src/packages/button/__test__/button.spec.js(这个目录、文件需组件开发者自己手动创建)
-
组件开发完成之后,需要编写单元测试(在第10项的文件里面),单元测试尽可能覆盖jsx里面的各个语句以及分支
-
使用npm run test:unit跑单元测试,以及覆盖率,会在根目录下生成相关的测试报告(mochawesome-report/mochawesome.html 是单元测试报告)(coverage/lcov-report/index.html 是概率报告)根据报告修改相应的测试代码,保证单元测试的通过,以及测试代码覆盖率(95%)的通过
-
组件开发完毕,使用npm run site,打包生成dist文件夹,部署到saastest.17wanxiao.com
-
使用npm run pkg 打包生成组件库代码目录lib
-
在test目录下面编写组件的测试代码(参考button组件)
-
使用npm run test:lib 测试demo.vue是否正常显示
-
button组件开发完成,合并到v2.x-dev分支,并push代码
注意:
- 开发者同时需要编写组件示例demo.vue(参考button组件)
- 组件的使用文档README.ch-CN(参考button组件)