Geca Element

Appearance

如何设计并完成一个组件给其他人使用 ​

前言: 在面对系统页面愈来愈多, UI样式愈来愈精细, 页面代码重复量愈来愈多的未来, 为了能够写出更高效, 更一致, 更安全的代码, 我们需要对重复性、规范性的模块进行封装, 从而也就有了这个组件库

1. 确定目标 ​

  • 当页面中使用场景较多(>=2)时, 如果其样式、逻辑基本一致, 那么这个区块就有了封装的意义; 如果已经有设计图, 那可以直接进入步骤2: 开发, 如果没有, 需要先和UI同步, 能够使未来设计图和页面产出更一致

2. 开发 ​

  1. 新建组件开发分支 建议格式: feature/base/yyyy-mm-dd-xx组件、feature/comp/yyyy-mm-dd-xx组件. 主要用以区分与需求的开发分支

  2. 组件: 写在src/components中 组件采用大驼峰文件夹, 其中写index.vue的方式

  3. 指令: 写在src/directives中

    • 指令采用中横线(kebab-case)的方式命名
    • 文件导出等方式查看开发注意事项

关于格式化, 更推荐prettier自带的格式化规则

3. 完成 ​

  • 开发完成并自测通过后, 可以先在test环境运行下, 必要时可以找测试协助
  • 验收通过, 新建到master的PR
  • 合并完成, 其他分支拉取master代码
  • 使用到页面中

4. 更新文档 ​

  • 文档markdown在src/docs/下, 按照已有的风格编写即可, 可以借助AI来生成

5. 部署文档 ​