【代码规范】大厂规范&项目实战中的 CodeStyle 之 Vue开发规范

这是我参与更文挑战的第 5 天，活动详情查看： 更文挑战

前文【效率工具】VsCode 集成终端 Cmder(四) 介绍了 Vscode 集成终端 Cmder, 更方便的命令行工具-，-

写作整理不易，勤快的大手子，爱心小小赞点一点啦 仅当参考，按需食用，不足之处，欢迎各路大佬不吝赐教，补充完善，欢迎分享

本文学习工作实践中用到的代码规范，仅供参考

前言

多人团队协作的过程中，代码不规范， 同事默默流泪。

日常工作中，你是不是总看不懂他写的代码，或是看起来就很费劲； 当你接手上一个 coder 的代码，你需要改他的代码却无从下手

一些大厂规范整理

大多数公司，工作团队，大厂都有清楚明了的代码规范文档，整理部分如下：

上面表格第一个 Vue 官方规范, > 下文介绍 实际项目中，使用 Vue2 开发的一些规范

一、注释规范

多人团队协作的过程中，代码不规范， 同事默默流泪。好的代码习惯便是清楚明了的 代码注释

1. 公共组件使用说明
2. 各组件中重要函数或者类说明
3. 复杂的业务逻辑处理说明
4. 特殊情况的代码处理说明,对于代码中特殊用途的变量、存在临界值、函数中使用的 hack、使用了某种算法或思路等需要进行注释描述
5. 注释块必须以/**（至少两个星号）开头**/
6. 单行注释使用//

二、编码规范

1. 使用 ES6 风格编码源码
   • 定义变量使用let, 定义常量使用 const
   • 使用 export， import 模块化
2. 组件 props 原子化
   • 提供默认值
   • 使用 type 属性校验类型
   • 使用 props 之前先检查该 prop 是否存在
3. 避免 this.$parent
4. 谨慎使用 this.$refs
5. 无需将 this 赋值给 component 变量
6. 调试信息 console.log() debugger 使用完及时删除

三、组件命名规范

1. 有意义的名词、简短、具有可读性
2. 以小写开头，采用短横线分割命名
3. 公共组件命名以公司名称简拼为命名空间(app-xx.vue)
4. 文件夹命名主要以功能模块代表命名

四、vue 方法放置顺序

• components 模板
• props 父子组件传递信息
• data
• created
• mounted
• activited
• update
• beforeRouteUpdate
• metods
• filter
• computed
• watch

五、HTML 规范

1. 结构顺序和视觉顺序基本保持一致

2. 结构，表现，行为三者分离，避免内联

3. 保持良好的简洁的树形结构

4. 结构上如果可以并列书写，就不要嵌套。

   • 如果可以写成<div></div><div></div>那么就不要用嵌套方式写成<div><div></div></div>

5. 如果结构已经可以满足视觉和语义的要求，那么就不要有额外的冗余的结构。

   • 比如<div><h2></h2></div>已经能满足要求，那么就不要再写成<div><div><h2></h2></div></div>

6. 一个标签上引用的类名不要过多，越少越好。

   • 比如不要出现这种情况：<div class =“class1 class2 class3 class4”> </ div>

7. 对于一个语义化的内部标签，应尽量避免使用的 className。

   • 比如在这样一个列表中，li 标签中的 itm 应去除：<ul class="m-help"><li class="itm"></li><li class="itm"></li></ul>

六、 CSS 规范

1. 命名规则

   • 使用类选择器，放弃 ID 选择器
   • NEC 特殊字符："-"连字符
   • 分类的命名方法：使用单个字母+"-"为前缀
   • 命名应简约而不失语义

2. 代码格式

   • 选择器、属性和值都使用小写
   • 单行写完一个选择器定义
   • 最后一个值也以分号结尾
   • 省略值为 0 时的单位
   • 使用单引号
   • 根据属性的重要性按顺序书写
   • 注释格式：/* 注释文字 */

3. 选择器顺序

   • 请综合考虑以下顺序依据：
   • 从大到小（以选择器的范围为准）
   • 从低到高（以等级上的高低为准）
   • 从先到后（以结构上的先后为准）
   • 从父到子（以结构上的嵌套为准）

这里列举部分配置，仅作参考，抛砖引玉，有没有 get 到呢?

这次没有预告

下文我将更新【我还没有想好】-，-..敬请期待明天再构思.. hahah