前端代码规范（vue篇）

引言

1.1目的及文档说明

规范的目的是为了统一编码风格规范，提高代码质量和可读性，增强团队协作开发效率（参考腾讯、百度、字节跳动等前端规范）

HTML规范

2.1.语义化标签

标签语义化，切忌清一色的 div 元素。列表可以使用 ul li，文字使用 p 标签，标题使用 h* 标签，等等。 HTML5 推出了语义化的标签，建议使用：section，aside，header，footer，article，等 HTML5 布局标签。

2.2.自定义标签

使用自闭标签的写法，如下

js 复制代码

<my-owner-components />

2.3. 多特性分行写

js 复制代码

<template> 
    <scroll 
        ref="scrollWrap" 
        class="home-scroll-warp" 
        :data="homeData" 
        :pullDownRefresh="true" 
        :pullUpLoad="true" 
        @pullingDown="pullingDownGetNewData" 
        @pullingUp="pullingUpGetMore" 
     />
</template>

2.4. 使用表达式

在模版中使用表达式，复杂情况使用计算属性或函数，如下：

js 复制代码

<template>
    <div v-show="getLimitData(data)"> 
    ... 
    </div>
</template>

// 反例
<template> 
  <div v-show="data.type !== 'dir' && dzqz && hasBtn && attrs.mode !== 'ended'"> 
   ... 
  </div> 
</template>

2.5.代码嵌套

根据元素嵌套规范，每个块状元素独立一行，内联元素可选，如下：

js 复制代码

// 第一种
<div>
  <h1></h1>
  <p></p>
</div> 
<p><span></span><span></span></p>

// 第二种
<div>
  <h1></h1><p></p>
</div>
<p> 
  <span></span>
  <span></span>
</p>

2.6.避免重复

避免过多重复代码，如果超过三行类似的代码，配置数据再循环遍历

2.7.活用v-show, v-if (不要同时出现在一个标签上）

v-show不会改变dom树，也就是说不会导致重排。
v-if会改变dom树，会导致重排。

2.7注释规范

js 复制代码

<!-- 单行注释 -->
<div class="test">
  <!-- 组件注释 -->
  <gdCustomTable ref="gdCustomTable" />
  <!-- 其他注释 -->
  <div>...</div>
</div>

<!-- 
  多行注释
  多行注释
-->
<div>内容</div>

CSS规范

推荐使用UnoCSS引擎进行原子化CSS开发推荐使用scss预编译由于样式的情况比较多也比较复杂做出如下规范

3.1.避免

避免使用标签选择器。因为在 Vue 中，特别是在局部组件，使用标签选择器效率特别低，损耗性能，建议需要的情况，直接定义 class；
非特殊情况下，禁止使用 ID 选择器定义样式。有 JS 逻辑的情况除外；
避免使用important选择器；
避免大量的嵌套规则，控制在3级之内，对于超过4级的嵌套，考虑重写或新建子项；
避免使用ID选择器及全局标签选择器防止污染全局样式；

3.2.推荐使用

提取公用样式进assets文件styles里，按模块/功能区分；

js 复制代码

|assets
|-- styles
| |-- common 放置公用样式，如重置，混合，复写element样式等 
| |-- modules 放置模块样式

推荐使用直接子选择器；

js 复制代码

/* 推荐 */ 
.jdc {} 
.jdc li {} 
.jdc li p{}

/* 不推荐 */ 
*{} 
#jdc {} 
.jdc div{}

使用 scoped 关键字，约束样式生效的范围

js 复制代码

<style lang="scss" scoped>
.app-wrapper {
  ... 
}
</style>

使用变量可复用属性尽量抽离为页面变量，易于统一维护

js 复制代码

// CSS 
.class-name { 
  color: red;
  border-color: red; 
} 

// SCSS 
$color: red; 
.class-name { 
  color: $color;
  border-color: $color; 
}

3.3.书写顺序

CSS 属性书写顺序：先决定定位宽高显示大小，再做局部细节修饰，推荐顺序（可以提升浏览器渲染 dom 的性能）：

定位属性(或显示属性，display)->宽高属性->边距属性(margin, padding)->字体，背景，颜色等，修饰属性的定义，这样定义为了更好的可读性，让别人只要看一眼就能在脑海中浮现最终显示的效果。

1. 布局定位属性：display / position / float / clear / visibility / overflow
2. 自身属性：width / height / margin / padding / border / background
3. 文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
4. 其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient ...

以下给出常用的定义示例：

js 复制代码

.class-name {
  position: fixed;
  top: 100px; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  display: block; 
  width: 100%; 
  height: 100%;
  margin: 10px; 
  padding: 10px; 
  font-size: 14px; 
  color: #000; 
  background-color: red; 
  border-radius: 2px; 
  line-height: 1.42; 
}

3.4.样式覆盖

组件内部需要覆盖UI框架样式，必须在最外层组件加类名

3.5.注释规范

以/ 注释内容 /格式注释，前后空格，嵌套子类需要一个回车分割开

js 复制代码

/* 注释内容 */
.pha-element {
  width: 20px;
  /* 这里需要换行 */ 
  .pha-element-l { 
    color: blue 
  } 
}

JS规范

在vue-cli 脚手架使用架自带的指向 src 开发目录的 '@' 符号引入文件资源；
使用计算属性规避 v-if 和 v-for 用在一起；
统一使用单引号；
坚持单一原则，函数内仅做该函数应该做的，尽量避免通过传入标记控制不同行为；
优先考虑三目运算符，但谨记不要写超过3层的三目运算符；
对于无用代码必须及时删除，例如：一些调试的 console 语句、无用的弃用功能代码，如在开发分支可提交打印代码，但要注意打印格式，如下：

js 复制代码

// 推荐 
console.log('路由': 文件路由, '打印简述': 打印数据) 

// 不推荐 
console.log(打印数据, '1111')

条件语句避免负面条件，特指调用某一函数；

js 复制代码

// 不推荐 
if (!isUserNotBlocked(user)) { 
  // ... 
}

未完待更