技术选型规范文档

  1. # XX技术方案调研/选择
  3. ## 背景
  5. 简述下，技术调研/选择背景(应用场景)，技术原理，目的是什么（为了解决XX问题）？
  7. ## 业界主流技术方案列举
  9. * 典型方案及demo实践
  10. * 对比其优缺点
  11. * 是否需要做方案优点整合？
  13. ## 在实践Demo中遇到的典型问题
  15. * 阐述：问题 && 原因 && 解决方案
  17. ## 最终选择该方案的亮点
  19. * 阐述目前方案的较业界的优点，或者说优化了某个缺点
  20. * 可以从复用性，功能/兼容性等角度
  22. ## 可能存在的问题
  24. * 预估存在的风险（后期的优化规划）
  26. ## 方案评审
  28. * 若项目较大或较无把握，可以开一个方案评审会议

技术设计文档规范

  1. # 技术方案设计
  3. > 根据具体的项目复杂度，进行项目合理的技术设计。（此设计纬度，仅限前端）
  5. ⚠️⚠️⚠️ 注意：
  7. 1. 技术设计尽可能的基于目前公共资源，如果发现有设计不合理的地方，可以反馈公共支撑组优化
  8. 2. 如果公共资源没有的方案，尽可能的抽取出可公用的部分，返哺给公共组。
  10. ## 概要设计
  12. ### 架构图
  14. 目的：加深对整体的结构足够了解（可以向pm、qa和rd咨询了解）
  16. ### 项目基础结构图
  18. 目的：对项目的目录/功能结构加深理解
  20. ### 流程图
  22. 流程图是面向过程的，用于描述一个算法或者业务的过程。
  24. 目的：明确业务范围，明确我们到底要做什么，不做什么，帮助识别边界。
  26. ## 详细设计
  28. ### 时序图（交互图）
  30. 目的：根据不同的视角看问题，可以从用户的角度，切身思考🤔会遇到的问题，从而优化用户体验。
  32. ### 开发&测试用例-思维导图
  34. 目的：梳理需求文档，细化文案、设计和交互功能，每个case，防止文档遗漏。

README规范

  1. # 项目名
  3. ## 简介（Introduction）
  5. 这里可以把项目背景简单介绍下，可以把项目的目标以及后面规划的写下。（可以咨询相关pm）
  7. ## 方案选择（Scheme）
  9. 包含内容：方案设计选择，可以写调研的方案参考，优缺点，调研实践demo，以及最终选择的原因等。
  11. 其他：
  12. * 这部分过复杂，可以单独，对应的项目目录中，然后这里此readme，标注引导
  13. * 可参考规范`【技术方案选择文档编写规范】`
  15. ## 项目设计结构（Structure）
  17. 包含内容：最终的方案设计，目录 or 功能结构，这部分以图表（流程图或者思维导图等）的形式展示，必要的主流程图，细节交互可以补上对应的测试用例等。
  19. 其他：
  20. * 这部分过复杂，可以单独，对应的项目目录中，然后这里此readme，标注引导
  21. * 可参考规范`【技术方案设计文档编写规范】`
  23. ## 使用（Usage）
  25. # 安装依赖（如果生成初始化项目时已经安装完毕，无需安装）
  26. npm install
  28. # 开发模式 localhost:8000
  29. npm run dev
  31. # 构建模式
  32. npm run build
  34. # 构建模式 + 分析报告
  35. npm run analyz
  37. # 语法校验
  38. npm run lint
  40. # 自动修复
  41. npm run fix
  43. # 按规范 git commit 并自动生成 changelog
  44. npm run cz
  46. ## 开发（Development）
  48. 具体开发注意事项，使用的工具包，功能特征等等
  50. ### 页面配置
  52. - 页面配置 1
  53. - 页面配置 2
  55. ### 页面对应地址
  57. | 页面 | 功能 | 地址 |
  58. |------|-----|------|
  59. | home | 首页 | https://xxxxx/home |
  60. | about | 详情页 | https://xxxxx/about |
  62. ## API（Reference）
  64. 1. api 1
  65. 2. api 2
  67. ## FAQ（常见问题解答）
  69. 1. 常见问题1
  70. 2. 常见问题2
  72. ## 附录（Appendix）
  74. - [ChangeLog]()
  75. - [其他文档]()

项目目录

  1. ├── CHANGELOG.md                  // [生成] 更新日志
  2. ├── README.md                     // [必选] 导读
  3. ├── config                        // [可选] 配置目录
  4. │   ├── config.js                 // [生成] 基本配置
  5. │   └── router.config.js          // [必填] 路由
  6. ├── dist                          // [生成] 打包目录
  7. ├── docs                          // [可选] 文档
  8. ├── mock                          // [可选] mock 数据
  9. │   └── sample.js                 // [可选] demo
  10. ├── package.json                  // [必选] 大家都懂
  11. ├── public                        // [必选] 不会被webpack编译的资源
  12. └── src                           // [必选] 开发目录
  13.     ├── app.js                    // [必选] 运行时配置文件
  14.     ├── assets                    // [可选] 公共资源（被项目引用的经过webpack处理的资源）
  15.     ├── components                // [必选] 业务组件必须写在这里
  16.     ├── global.jsx                // [必选] 全局执行入口
  17.     ├── global.less               // [必选] 需要重置的样式或者全局样式引用
  18.     ├── layouts                   // [可选] 基本的布局封装
  19.     ├── models                    // [可选] 对异步数据处理
  20.     ├── pages                     // [必选] 页面组件，不允许有其他类型组件混入
  21.     ├── services                  // [必选] 业务接口封装
  22.     └── utils                     // [可选] 工具库（用于一些函数方法之类的库）
  23. ├── ...

参考文档：https://juejin.im/post/6875157718924492808?utm_source=gold_browser_extension