-
组件目录名和组件名都用大驼峰命名
尽量不用 index.vue
例如: Login文件下,就直接用 Login.vue, 这样更清晰. 组件目录下有多个文件也能直观看出各个文件作用. -
所有前端项目全局采用4个空格进行缩进,VSCode也是建议的4个空格.
-
注释: 多写注释.
-
命名前缀
(1) 所有api封装函数以 api_ 开头.
(2) 所有全局状态实例以 store_ 开头.
(3) 所有数据转换函数以 translate_ 开头. -
组件编写
(1) 大多数组件状态应该使用 reactive 定义在一起,并命名为state, 尽量避免使用 ref (ref dom 除外).
(2) 组件应该定义尽量少的必填属性, 特别是通用组件, 最好可以0个属性就渲染出组件所有基本功能.
(3) 所有业务组件应加上样式作用域. 通用组件不加样式作用域,采用作用域类名.
(4) 结构优先,保证让人看到结构后知道一个组件表达的大体内容,而不是把代码都写进JS中. 结构表达信息,程序表达逻辑.
(5) 组件跟标签的顺序始终应该是 style template script. 官方推荐的是 scrpit template style. (待考究) -
编码思想
(1) 始终使用 export 统一导出模块内容, 禁止使用 export default 和零散的 export const.
(2) 一个按键只有跳转功能,那就把跳转功能内联到模板里, 无需专门定义函数调用.
(3) 避免嵌套,除非无法避免. less或scss中最好别样式嵌套3层以上.
(4) 只做有用的封装, 反复思考封装之后与封装前的改变. 过度封装不如不封装.
(5) 不允许使用所谓的原子化css. 类似 tailwind css 的思想写法也不行. -
class 类名的命名
使用全部小写单词, 超过两个单词,中间用短横线连接.
.content-ball { } -
一个Vue组件合适的代码行数和长度
(1) 一个Vue组件,最好控制在500行以内.
(2) 一行80个字符或者120个字符都行.
前端编码规范
于 2023-05-11 10:44:04 首次发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)