前端编码规范

1. 组件目录名和组件名都用大驼峰命名
   尽量不用 index.vue
   例如: Login文件下,就直接用 Login.vue, 这样更清晰. 组件目录下有多个文件也能直观看出各个文件作用.

2. 所有前端项目全局采用4个空格进行缩进,VSCode也是建议的4个空格.

3. 注释: 多写注释.

4. 命名前缀
   (1) 所有api封装函数以 api_ 开头.
   (2) 所有全局状态实例以 store_ 开头.
   (3) 所有数据转换函数以 translate_ 开头.

5. 组件编写
   (1) 大多数组件状态应该使用 reactive 定义在一起,并命名为state, 尽量避免使用 ref (ref dom 除外).
   (2) 组件应该定义尽量少的必填属性, 特别是通用组件, 最好可以0个属性就渲染出组件所有基本功能.
   (3) 所有业务组件应加上样式作用域. 通用组件不加样式作用域,采用作用域类名.
   (4) 结构优先,保证让人看到结构后知道一个组件表达的大体内容,而不是把代码都写进JS中. 结构表达信息,程序表达逻辑.
   (5) 组件跟标签的顺序始终应该是 style template script. 官方推荐的是 scrpit template style. (待考究)

6. 编码思想
   (1) 始终使用 export 统一导出模块内容, 禁止使用 export default 和零散的 export const.
   (2) 一个按键只有跳转功能,那就把跳转功能内联到模板里, 无需专门定义函数调用.
   (3) 避免嵌套,除非无法避免. less或scss中最好别样式嵌套3层以上.
   (4) 只做有用的封装, 反复思考封装之后与封装前的改变. 过度封装不如不封装.
   (5) 不允许使用所谓的原子化css. 类似 tailwind css 的思想写法也不行.

7. class 类名的命名
   使用全部小写单词, 超过两个单词,中间用短横线连接.
   .content-ball { }

8. 一个Vue组件合适的代码行数和长度
   (1) 一个Vue组件,最好控制在500行以内.
   (2) 一行80个字符或者120个字符都行.