老项目 vue 开发规范

一、vue规范

1、组件命名规范

Vue官方说明：

当注册组件 (或者 prop) 时，可以使用 kebab-case (短横线分隔命名)、camelCase (驼峰式命名) 或 PascalCase (单词首字母大写命名)。 
PascalCase 是最通用的声明约定而 kebab-case 是最通用的使用约定。

命名可遵循以下规则：

1、有意义的名词、简短、具有可读性 
2、以小写开头，采用短横线分割命名 
3、公共组件命名以公司名称简拼为命名空间(app-xx.vue) 
4、文件夹命名主要以功能模块代表命名 
同时还需要注意：必须符合自定义元素规范: 使用连字符分隔单词，切勿使用保留字。app- 前缀作为命名空间: 如果非常通用的话可使用一个单词来命名，这样可以方便于其它项目里复用。

2、vue文件方法声明顺序

• components
• props
• data
• created
• mounted
• activited
• update
• beforeRouteUpdate
• metods
• filter
• computed
• watch

3、注释规范

代码注释在一个项目的后期维护中显的尤为重要，所以我们要为每一个被复用的组件编写组件使用说明，为组件中每一个方法编写方法说明。 
以下情况，务必添加注释：

1.公共组件使用说明 
2.各组件中重要函数或者类说明 
3.复杂的业务逻辑处理说明 
4.特殊情况的代码处理说明,对于代码中特殊用途的变量、存在临界值、函数中使用的hack、使用了某种算法或思路等需要进行注释描述

4、编码规范

优秀的项目源码，即使是多人开发，看代码也如出一人之手。统一的编码规范，可使代码更易于阅读，易于理解，易于维护。尽量按照ESLint格式要求编写代码

1.使用ES6风格编码源码 
2.组件 props 原子化，提供默认值，使用 type 属性校验类型，使用 props 之前先检查该 prop 是否存在 
3.避免this.$parent

4.谨慎使用this.$refs

5.无需将 this 赋值给 component 变量

二、PAAS项目规范

1、命名规范

class 使用“ - ” 进行命名，id使用驼峰式命名； 
新建立文件名使用驼峰式命名。文件名需大致反应文件信息；名称统一使用英文名词

2、文件规范

①、提取公共组件以及公共样式，不要多个页面重复编写 
②、由一个人去负责页面整体的框架布局以及美观，后续开发按照设定的规则来 
③、vue方法的申明按照生命周期的顺序，剩下的其他方法按照vue 设定的规范来 
④、代码编写一定得写注释，以便于二次优化和维护