浅谈Vue风格的前端开发规范因为团队需要，所以就简单的总结一下Vue风格的前端开发规范。代码千万行，安全第一行；前端不规

因为团队需要，所以就简单的总结一下Vue风格的前端开发规范。

代码千万行，安全第一行；前端不规范，同事两行泪。

命名规范

项目命名

全部采用小写方式，以下划线分隔。

例：my_project_name

目录命名

采用驼峰命名法。

例：directoryName

components下的组件目录名，使用大驼峰命令。

例：TopBar

有复数结构时，采用复数命名法。

例：components，directives，filters，mixins，utils，views，pages，scripts，styles，themes，images，audios，videos

文件命名

采用驼峰命名法。

例：fileName

JS变量命名

标准变量采用驼峰式命名

例：pageNum，pageSize

常量全大写，用下划线连接

例：PI，COMMAND_STATUS，ORG_TYPE

构造函数，大写首字母

例：

class Person {}
function Auth {}

样式命名

class、id都需小写，并以-分隔
使用英文，禁止使用特殊字符
命名需要语义化

例：

.wrap {}                 // 外层容器
.mod-box {}              // 模块容器
.btn-download {}         // 下载按钮
.top-bar {}              // 顶部菜单栏

图片命名

名称小写，并以_分隔
使用英文或拼音缩写，禁止使用特殊字符
命名需要能体现图片的大概用途

例：

bg.jpg               // 背景图片
icon_camera.png      // 相机图片

注释规范

单行注释

推荐使用//

// 选择地图定位
openMap();

let max = Math.max(1, 2, 3); // 获取最大值

/* 上传附件 */uploadFile();

多行注释

/**  
 * 从数据列表中获取值         
 * @param { Array } arr - 数据列表         
 * @param { String } curValue - 当前值         
 * @param { String } key - 数据列表中的属性名         
 * @param { String } value - 数据列表中的属性值         
 * @return { Any } 返回匹配值，没有匹配到返回undefined         
 */        
matchValue(arr = [], curValue, key = "key", value = "value") {          
  let result = arr.find(item => {            
    return item[key] == curValue;          
  });          
  return result ? result[value] : result;        
}

HTML规范

通用约定

嵌套的节点缩进2字符
属性名小写
属性值使用双引号包裹
标签闭合
<img>

标签的alt属性不为空
尽量减少标签数量
标签过长换行显示
不使用行内标签包裹块级标签或者行内块标签
v-for / v-if不在同一个标签使用

语义化标签

正确的标签干正确的事

例：

<header></header> 
<footer></footer>
<nav></nav>
<main></main>
<section></section>
<article></article>
<aside></aside>
<mark></mark>

自定义组件

组件名小写，并以-分隔
需要设置属性值为true时，使用单个属性名

例：

<service-plan editable></service-plan>

组件/实例的选项顺序

<script> 
  export default {
    name: 'ExampleName',  // 大驼峰命名
    props: {},            // Props
    components: {},       // 组件
    directives: {},       // 指令
    mixins: [],           // 混入
    filters: {},          // 过滤器
    data () {             // Data
      return {
        dataProps: ''     
      }
    },
    computed: {},           // 计算属性
    watch: {},              // 监听器
    created () {},         
    mounted () {},         
    activated () {},        // 使用 keep-alive 包裹的组件激活触发的钩子函数
    deactivated () {},      // 使用 keep-alive 包裹的组件离开时触发的钩子函数
    methods: {},            // 组件方法定义
  }
</script>

CSS规范

通用约定

嵌套的声明缩进2字符
尽量使用缩写属性
每个属性以分号结束
静态样式使用class，避免使用style
尽量减少层级
0后不加单位
正常不推荐使用id解决样式
避免使用*

例：

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.container header {
  margin: 0;
  padding: 10px 20px;
  border: 1px solid #e7e7e7;
  font: 100%/1.5 palatino, georgia, serif;
}
.container main {
  flex: 1;
}

公共样式统一管理

── styles   
  ├── base.scss  
  ├── reset.scss  
  └── index.scss

JavaScript 规范

通用约定

缩进2字符
代码结尾以；结束
使用严格相等===

例：

process.env.NODE_ENV === "production" ? "build" : "dev";

设置默认参数

例：

matchValue(arr = [], curValue, key = "key", value = "value") {          
  let result = arr.find(item => {            
    return item[key] == curValue;          
  });          
  return result ? result[value] : result;        
}

使用箭头函数

例：

arr.forEach(item => {})

字符串拼接使用模板字符串

例：

`${year}年${month}月${date}日${hours}时${minutes}分`

图片&字体图标

小图标用字体图标iconfont

大图用高品质压缩图

其他

删除项目中无用代码
对数据做容错处理

例：

this.detail = res || {};
<template v-if="detail.feedback && detail.feedback.files">
  <img 
    :src="item.url"     
    :alt="item.name"     
    v-for="(item, index) in detail.feedback.files"     
    :key="index"  
  />
</template>

遍历数据跳出循环

例：

arr.find(item => {
  return item.id === this.regionId;
});

arr.some(item => {
  if (item.id === this.regionId) {
    return true;
  } 
});

for (let i = 0; i < 5; i++) {
  if (i === 3) break;
}