一、规范目的
a. 为了提高团队协作效率；
b. 方便后期维护；
c. 方便新加入的同事快速上手。
二、结构规范
1．项目结构
![]( "系统研发 > 前端开发规范 > image2020-3-27_2-38-16.png")
a. api - 接口配置，统一管理（应按照后端接口模块建立对应js文件）
b. assets - 静态文件存放位置
c. components - 公用组件
d. filters - 全局过滤器
e. router - 页面路由，统一管理
f. store - vuex，统一管理
g. styles - 全局css样式表
h. utils - 全局工具方法
i. views - 视图目录
**2．vue文件基本结构
**
![]( "系统研发 > 前端开发规范 > image2020-3-27_2-39-14.png")
a. template区域，html接口建议按照页面设计区域划分代码块，增强可读性；
b. script部分，请按照上图中选项的顺序书写；
c. style部分，各个vue实例/组件的css应该是用scoped限制，防止各组件互相污染；
三、命名规范
注：所有文件、方法、参数的命名，都尽量使用两个或两个以上的完整单词，将语义表达清楚，尽量避免使用含义不明确的单词缩写以及数字。
1．文件夹命名
a. 尽量使用一个单词（名词）来命名，例如card、order等；
b. 如果一个单词不足以描述清楚，要使用多个单词，用kebab-case风格（优先选择将语义表达清楚）；
2．vue文件命名
a. 使用PascalBase风格;
b. 组件名应该以高级别的 (通常是一般化描述的) 单词开头，以描述性的修饰词结尾（如下图）；
c. 和父组件紧密耦合的子组件应该以父组件名作为前缀命名（因为编辑器通常会按字母顺序组织文件，所以这样做可以把相关联的文件排在一起， 如下图的CardEdit 和 CardEditImageList）；
![]( "系统研发 > 前端开发规范 > image2020-3-27_2-41-33.png")
d. 如果vue文件是组件，组件的命名用PascalBase风格，js内引用组件同样用PascalBase风格，html内使用组件用kebab-case风格；
![]( "系统研发 > 前端开发规范 > image2020-3-27_2-41-56.png")
3．js文件命名
a. 属于类的.js文件，除index.js外，使用PascalBase风格;
b. 其他类型的.js文件，使用kebab-case风格;
4．css、less文件命名
统一使用kebab-case风格
5．method方法命名
a. 使用camelCase风格, 统一使用动词+名词形式，例如showDialogBox、hideDialogBox;
b. 动词常用选项，get（单选）、list（多选）、add、update、delete、show、hide等（常用的尽量选这几个，除此之外，不做强制限定，但是风格尽量保持统一）；
c. 获取接口数据的方法，以data结尾，便于识别（例如listOrdersData、getOrderData）；
d. api内的接口方法，统一用api作为后缀，例如（listOrdersApi、getOrderApi）。
e. 像查询数据之类的方法，如果多个方法风别按不同的条件查询，可以在后面加上by来识别（例如，getItemById、getItemByCode）。
![]( "系统研发 > 前端开发规范 > image2020-3-27_2-43-49.png")
四、代码书写 规范
1．源码风格
编码使用ES6风格，并且引入ESLint校验，要求代码内部不允许有不符合ESLint规范的红色提示(如果配置正确，有红色提示代码是运行不起来的）。以下列举一些常见的ES6风格的写法：
a. 定义变量使用 let ，定义常量使用 const ;
b. 静态字符一律使用单引号或反引号。动态字符串拼接用反引号;
![]( "系统研发 > 前端开发规范 > image2020-4-1_0-40-18.png")
c. 使用扩展运算符（...）拷贝数组；
![]( "系统研发 > 前端开发规范 > image2020-4-1_0-40-56.png")
2．指令规范
a. 指令有缩写一律采用缩写形式;
![]( "系统研发 > 前端开发规范 > image2020-4-1_0-41-28.png")
b. v-for 循环必须加上 key 属性，在整个 for 循环中 key 需要唯一（可以选择用index作为key）;
![]( "系统研发 > 前端开发规范 > image2020-4-1_0-42-12.png")
c. 避免 v-if 和 v-for 同时用在一个元素上（性能问题）；
3. 组件Props 规范
当写一些公用组件时，应尽量将组件描述以及props定义写的详细一点。
![]( "系统研发 > 前端开发规范 > image2020-4-1_0-43-21.png")
![]( "系统研发 > 前端开发规范 > image2020-4-1_0-43-32.png")
4. CSS规范
a. 使用less（less的语法可以参考网上的教程）；
b. 建立一个全局的主题样式表，将全局公用的主题颜色维护成变量，其他地方设置颜色的时候，直接调用变量名称，这样后期修改主题色，直接改变量值就可以了；
![]( "系统研发 > 前端开发规范 > image2020-4-1_0-43-58.png")
![]( "系统研发 > 前端开发规范 > image2020-4-1_0-44-44.png")
c. 如果 CSS 可以实现的效果，就不要使用 JS；
d. 移动端布局建议多使用flex布局；
e. 移动端建议使用rem作为计算单位；
f. 建议使用类选择器，尽量避免使用元素选择器；
g. vue组件内部的style，应加上scoped的标签设定作用域，防止组件之间的样式互相影响。如果多个组件公用的样式，应该整理之后提升到全局公用样式表；
h. css的样式属性，应该按照一定的顺序书写，养成习惯，对于开发效率和后期维护都有裨益。声明顺序可参考下表（从左到右，从上到下）：
![]( "系统研发 > 前端开发规范 > image2020-4-1_0-45-22.png")
![]( "系统研发 > 前端开发规范 > image2020-4-1_0-45-45.png")
5. 注释规范
a. 多行注释，用/**（可以根据情况，加入不同的参数描述）；
![]( "系统研发 > 前端开发规范 > image2020-4-1_0-46-5.png")
b. 单行注释，用//（单行注释需另起一行，不要不要在代码后的同一行内加注释）；
c. 公共组件使用说明，务必添加注释；
d. 各组件中重要函数或者类说明，务必添加注释；
e. 复杂的业务逻辑处理说明，务必添加注释；
6. 其他
a. 代码写完一定要格式化（团队按照标准的ESLint规范执行统一的格式化标准）！！！
b. 文件顶部要加fileHeader，将该文件的创建人以及文件用途描述清楚；
c. 前端调试时用的console.log()，调试完要及时删除；
d. 尽量将大段逻辑拆分成多个代码块，避免大段代码造成阅读困难；
e. 如果文件内代码量较长，可以适当在代码块之前插入空行，是代码更清晰；
写代码时，html元素属性应尽量保持相同顺序，例如class、id、name、type等，保持顺序可以使得代码风格统一，并于阅读（这个不做强制限定）；
