由于所在公司前端代码较不规范，近期应公司领导要求，整理出了一份公司内部的前端开发规范标准。这里参考了一些文章，并对自己实际开发经验中遇到的一些不规范的代码纠正进行总结归纳。分享出来，如有不足欢迎留言补充~
目的是为了：统一编码风格，命名规范，注释要求，在团队协作中输出可读性强，易维护，风格一致的代码。

1.命名编码规范：

（1）变量名、方法名、组件名、文件名、文件夹名遵循下命名规则：

驼峰式：如：studentInfo、userInfo、productInfo 多单词首字母小写命名

语义化：如：studentAge、userName、getUserName 能直观明白意图命名

类型化：如：studentObj、userInfoArray、productString 能直观明白类型命名

（2）变量声明 var、let、const

当你的变量能保证不会被修改，则用const，如一些常量等

如果是会一直修改，则使用let

尽量不要使用var，会造成全局或者局部污染 （可自行百度let var 区别）

（3）常量命名

• 命名方式：全部大写
• 命名规范：使用大写字母和下划线来组合命名，下划线用以分割单词

2. 注释规范：

（1）每个方法的功能用途必须写注释，方法内关键步骤和节点要写注释，尤其是不易被人理解的地方。

（2）传参和返回结果，必须标注数据类型和参数说明。

（3）方法采用多行注释，单行代码或if、swicth、for等js语句采用单行注释。

（4）被注释并保留下来的代码，需标注说明保留原因。

代码注释范例

3. vue组件模板代码规范：

（1）标签排列顺序

模板标签按照如下顺序规范排列

<template>
 <div>
 </div>
</template>
<script>
 export default {
   name: 'Error404',
   components: {
   },
   data () {
     return {
     }
   },
    methods: {
      goHome () {
        this.$router.push({
            name: 'home_index'
        });
      }
    }
 }
</script>
<style scope>
</style>

（2）data变量注释

data里每个变量用途都需要注释，无用变量及时删除，并且做好关联变量分类

（如下show和btnName有关联关系，我们就可以在modleInfo中写，避免变量杂乱无章可读性差）

（3）变量初始值规范

建议：所有变量都要在data中进行初始化，不初始化Vue有时候会监听不到数据变化导致DOM视图层不更新或某些UI组件绑定后各种奇怪的报错，尤其是表单填写提交和数据回填可能会导致某些表单组件报数据类型的错误从而导致表单自动化校验失败。

对于初始值是字符串类型的字段：
userName:''
对于初始值是 数组类型 的字段：
userList:[]
对于初始值是 对象类型 的字段：
userInfo:{} 或时间对象：nowTime:new Date()
对于初始值是 布尔类型 的字段：
isUserEdit:false 或 isUserEdit:true
对于初始值是 数字类型 的字段：
userNum:0 或没有初始值的时候 userNum:NaN
对于初始值 不确定类型 的字段：
userPage:null

（4）数据模板

对于一些较多字段的应用交互场景：比如，需要很多字段的表单填写，在data写初始化会使代码可读性非常差，也不美观。我们可以将这部分写在JS或JSON文件做为数据模板抽离出去然后暴露出来给组件调用。这样做的好处是数据模板可以复用，在其他地方如果有用到就无需再次进行初始化，只需要在组件初始化定义一个变量名，然后引入。

js数据模板 暴露数据模板供调用 引入数据模板

注意：引入的数据模板必须对模板进行深度复制:****Object.assign({},obj) 或者JSON.parse(JSON.stringify(obj))****，否则数据浅复制会因修改相互影响，深复制浅复制原理可自行百度。

（5）标签模板

如果在一个页面需要较多标签，可能使页面代码超长，可维护性差。需要将标签分模块封装成模板组件，缩短代码长度。模板名称与引入的名称一致。

（6）模板表达式

组件模板应该只包含简单的表达式，复杂的表达式则应该重构为计算属性或方法。
复杂表达式会让你的模板变得不那么声明式。我们应该尽量描述应该出现的是什么，而非如何计算那个值。而且计算属性和方法使得代码可以重用。

（7）指令缩写

都用指令缩写 (用 : 表示 v-bind: 和用 @ 表示 v-on:)

（8）避免 v-if 和 v-for 用在一起

永远不要把 v-if 和 v-for 同时用在同一个元素上。

一般我们在两种常见的情况下会倾向于这样做：

为了过滤一个列表中的项目 (比如 v-for="user in users" v-if="user.isActive")。在这种情形下，请将 users 替换为一个计算属性 (比如 activeUsers)，让其返回过滤后的列表。

为了避免渲染本应该被隐藏的列表 (比如 v-for="user in users" v-if="shouldShowUsers")。这种情形下，请将 v-if 移动至容器元素上 (比如 ul, ol)。

（9）v-for 标签循环规范

必须绑定 :key，并且保证key的唯一性（key不加可能造成Vue检测不到数据变化导致DOM视图层不更新）

（10）样式规范

少量样式可以写在组件，大量样式需要引入样式文件。

1. 组件样式可以放在组件文件夹，公共样式放在src文件夹下的style文件夹

2. 尽量使用类class选择器，尽量避免直接使用元素选择器 如：button{ ****background-color: red;****}，如有需要请用类选择器包裹起来。

正确示例（这里使用.caseBtn把P元素包裹起来）

3. 改变UI内部组件的样式必须先添加样式前缀包裹，否则会引起UI组件的全局样式污染

正确示例（这里使用.search把UI组件内部的样式包裹起来）

4.属于组件单独的样式必须在style标签加scope作用域，并且不能用import引入样式文件

引入样式错误示例：（此方法引入样式会造成全局样式相互覆盖污染）

引入样式正确示例：

（11）目录存放规范

1. components文件夹 和 view文件夹

禁止在 src/components 目录下放置业务私有组件，业务私有组件应该在view文件夹里相关业务文件夹下建立components目录存放

2. asset 文件夹

用于存放静态资源文件，希望被webpack编译处理的静态资源文件，放置公共js、css、img模块，私有模块应在业务相关文件夹下建立目录存放

3. static 文件夹

用于存放静态资源文件，希望不被webpack编译处理的静态资源文件或者一些不兼容webpack的js/jq插件，文件夹分文件类型js、css、img、插件名称存放

4. src/config、src/directives、rc/mixins、src/utils

只允许存放系统级别的模块、配置、功能

（12）父子组件通信规范

应该优先通过 prop 和事件进行父子组件之间的通信，而不是 this.$parent 或改变 prop。

image.png

（13）全局状态管理规范

应该优先通过 Vuex 管理全局状态，而不是通过 this.$root 或一个全局事件总线。

image.png

4. 代码复用规范：

一个流程多次复用的代码应该封装成函数传参或者组件的形式，不要复制粘贴写重复代码，避免代码冗余。

5. 文件引入规范：

统一使用 import / export 的方式管理项目的模块。

推荐使用相对路径引入，不推荐使用绝对路径引入。

推荐的引入方式：

不推荐的引入方式：

6. 推荐使用编译器：

推荐使用vs code进行前端编码，方便代码风格统一 ，避免不同人ide格式化差异导致的代码冲突覆盖问题，vscode拥有强大的插件生态，可以借助一些插件市场上的插件辅助对代码进行高效编辑。

可以参考 vscode配置代码风格和校验解决ide格式化差异导致的代码冲突覆盖问题

7. 推荐使用版本控制工具：

推荐统一使用git进行代码同步和版本控制
可以参考我的一篇文章：git安装配置及常用指令 gitHub使用

如有不足欢迎补充修订！
参考文章：Vue前端开发规范整理(推荐)