阿里前端代码规范

阿里前端代码规范
参考：https://blog.51cto.com/u_15295057/5002198
一，编程规约
1，命名
项目命名：小写加中横线
目录命名：小写加中横线，有复数使用复数，缩写不用
JS,CSS,SCSS,HTML,PNG：小写加中横线
禁止拼音和英文混合，禁止中文，避免纯拼音
2，html
DOCTYPE大写
缩进两个空格（一个tab）,嵌套节点缩进
分块注释（列表和表格后）
语义化标签
使用双引号
3，css
命名：
类名：小写加中横线
id：驼峰
scss中 变量，函数，混合，placeholder：驼峰
选择器：避免使用标签名，使用直接子选择器：>
使用缩写属性
省略0后面的单位，0px等
避免使用id选择器和全局标签
4，less
公共less在 style/less/common
按顺序组织 @import 变量声明 样式声明
避免层级过多，限制在3级
5，js
命名：
方法名，参数名，成员变量，局部变量都使用驼峰
方法名必须是 动词或者动词+名词
增删改查必须使用这五个单词： add、update，delete，detail，get
常量命名全部大写+下划线，不能用简写
格式：
两个空格缩进
不同逻辑，不同业务代码之间加空行分隔
字符串使用单引号
对象声明，使用字面值创建对象 let user = {}
使用ES6+
逻辑代码块必须使用大括号括起来，即使只有一行
不要直接判断undefined，使用typeof加undefined
条件和循环最好不要超过三层
this命名转换只能用self，不要用that了
减少console.log的使用
二，Vue项目规范
1，编码基础
以官方A规范为基础
2，组件规范
组件name应始终是多个单词，大于等于两个，并大写开头的驼峰命名
组件文件名为小写加中横线
基础组件使用base-开头
组件嵌套的时候以父组件名作为前缀 todo-list todo-list-item
template模板中自闭合 <my-component />
data属性必须是函数（使用return 返回）
props定义要详细，使用小写驼峰，指定类型，加上注释，加上required或default
组件scss使用scoped
组件属性多需要换行
组件模板不能使用复杂表达式
指令使用缩写 : 表示 v-bind @表示 v-on # 表示 v-slot
标签顺序保持一致： template script style
v-for 必须设置 key
频繁切换用 v-show 很少改变用 v-if
script 标签顺序：
components > props > data > computed > watch > filter > 钩子函数（钩子函数按其执行顺序） > methods
3，Vue Router规范
a，页面跳转路由传递使用路由参数
this.$router.push({ name: 'userCenter', query: { id: id } });
b，使用路由懒加载
c，router命名规范
path，childrenPoints 命名都用小写加中横线（kebab-case）,name使用大写驼峰（KababCase）,name和组件名保持一致以便于keep-alive缓存
4，router中的path规范
使用小写加中横线（kebab-case）,必须以斜杠 / 开头，
三，vue项目目录规范
1，基础
命名与后端保持一致
2，使用 vue-cli3 初始化项目
3，components组件大写驼峰，其余都是小写加中横线（kebab-case）
4，api文件对应后端controller，一个controller一个api.js
5，assets静态资源存放 images，styles，icons 资源命名格式 小写加中横线 （kebab-case） upload-header.png
6，router 尽量与 views 结构一致，store按业务拆分js
7，view命名与后端 router api一致
8，公共组件，api, store, methods , data 非常见单词都要加注释
9，不要手动操作DOM
10，因使用svn/git 等代码版本工具，及时删除无用代码