前端工程代码规范（一）——命名规则与工程约定

前言

随着前端团队人员的逐步扩大，需要有一份规范来约束代码的书写。
无论人数多少，代码都应该同出一门。
主要参考了 腾讯alloyteam团队，里面有许多认同点。在此基础上做了些许改进，为了更适合自己团队，那些已经达成共识的代码习惯。仅供参考。

命名规则

总原则：全部采用小写方式， 以中划线分隔。

项目名
例：my-project-name

目录名
有复数结构时，要采用复数命名法。
例：scripts，styles，images

JS、CSS/SCSS/LESS、HTML文件名
例：ad-group.js，ad-group.scss，ad-group.html

工程约定

一个工程内只有一个UI控件
以vue为例，确定使用element-ui之后，不可再引入其他ui控件。

工程中，src的目录结构
assets、components、pages/views、store、service、utils、styles、libs、static

代码的行数与列数限制
为了提升阅读体验，一个文件的行数不超过300，一行代码的列数不超过120
建议开启编辑器的自动换行功能

router的定义，要对应pages中的目录结构
例：如router为/advertise/group/list，则pages中的目录应为advertise->group->list

组件的传值
保持单一数据流，公用组件需有一个index文件进行统一注册

css的预编译器
采用less或者sass，非两者混用

变量申明
尽可能少用var，习惯使用let和const

不要使用eval
出于安全性考虑

一个工程内，所有文件名小写，以‘-’的形式联结
例：components/ad-group.vue、services/create-ad-service.js

import的变量名，首字母大写，并采用驼峰形式
例：
import AdGroup from @/components/ad-group.vue;
import CreateAdService from @/services/create-ad-service;

src下直属components文件夹中的组件约定
1、该组件在不同的2个页面中被引用
2、该组件中没有接口调用（若有接口调用，则表示与业务强关联，应放到views中对应的业务文件夹下）

目录索引

前端工程代码规范（二）——HTML
前端工程代码规范（三）——CSS, SCSS
前端工程代码规范（四）——JS