本文已参与「新人创作礼」活动，一起开启掘金创作之路。
本文写于2020年7月，相当于“页面结构与分析”的扩展版，本文针对vue项目的实际情况，结合页面结构规划来更好的使用注释。
为什么要写注释
- 便于后期维护
- 减少其他合作者阅读障碍
- 能辅助梳理逻辑
- 符合编码规范
如何通过注释来提高开发效率
- 开发速度的快慢，不在于打字速度，而在于代码逻辑的思考和实现方案的确定
- 这个思考过程往往是仅仅在脑子里想一下或者纸上画一下，然后去敲代码，这就会导致，过一段时间后，再回想当时的开发情况，往往会有些出入，不能够完全复现当时的想法甚至是忘记了，历史代码维护的困难主要在此处
- 我们完全可以通过写注释的方式来梳理需求，整理想法，在开始写代码前，先把实现思路通过注释的方式写下来，列一个步骤，后续按照步骤逐步实现即可。这样在正式开发前，注释基本就完成了
- 需要的是有意义的注释，而不是为了注释而注释。
结合页面结构规划来更好的使用注释
graph TD
A(拿到设计图) --> B[整体看一遍,了解要开发什么]
B --> C[确定终端与尺寸适配要求]
C --> D[确定要分几个页面来开发,对应建好相关文件,修改vue.config]
D --> E[找出可复用部分与复用方式]
E --> F[规划页面路由,确定文件目录结构]
F -- "在js开始处编写注释，描述这个文件具体功能和实现的思路" --> G[确定文件内容结构,定义class名]
G -- "在html部分描述每个块的预计内容，在css部分描述该class对应的中文含义，如果用到特殊的写法也可以根据需要描述" --> H[根据定好的class搭建样式结构]
H -- "在data内定义的变量均需要注释说明，引用的组件，监控的数据以及为何监控都需要说明下" --> I[规划页面内使用的方法和变量,组件与监控等]
I -- "按照代码结构和注释中规划的思路，一起梳理代码逻辑" --> J[逐个填充内容]
J -- "在过程中，根据需要补充或修改注释内容" --> K(开发完毕)
