一、命名规范
*命名原则：”简洁明了“为核心原则*
1．项目名称：
全部采用小写方式，仅限1到3个词组15个字符以内，用横线分割；
例：
project-name 或者 my-project-name
推荐2个词组即可，若超过15个字符可用缩写，例：my-pro-name
2．目录名称：
(1) 常规目录：
全部采用小写方式，限1词组10个字符以内
有复数结构时，要采用复数命名法
例：
components，libs，imgs，plug
(2) 页面目录：
全部采用小驼峰方式，限1到2个词组10个字符以内，可用缩写
例：
fundHome，finIndex，home
3．文件名称：
(1) 页面入口文件：
强制使用：index.vue和index.js
(2) 组件名称：
全部采用大驼峰方式，限1到3个词组15个字符以内，可用缩写
例：
NameCard.vue WxQuestion.vue
(3) 其他文件：
全部采用小驼峰方式，限1到2个词组10个字符以内，可用缩写
例：
index.vue index.js
4．变量名称：
(1) 声明变量禁止使用var关键字，使用const和let；
(2) script中 data变量 和 方法命名全部采用小驼峰方式
例：isRef、isShare、initData()、getUserInfo()
(3) this变量别名必须使用_this；
(4) 私有变量和私有方法以下划线“_”开头
例：
const _this = this;
(5) 参数名：全部采用小驼峰方式
(6) 类名：全部采用大驼峰方式
5．组件调用/参数/方法名称：
(1) 组件调用：组件名称必须用横线“-”连接，
(2) 组件属性优先级顺序：条件 > ref > id > class > 参数 > 方法
(3) 组件参数：采用横线“-”连接
(4) 组件方法：用$emit抛出方法时必须使用横线“-”连接，限1到3个词组15个字符以内
例：
this.$emit("pro-callback",res);
6．样式选择器命名：
(1) id名：全部采用小驼峰方式
(2) class名：用下划线“_”连接，限1到3个词组15个字符以内
(3) less中样式变量名：以横线“-”连接
例：
@default-color:#333
(4) less中方法名：全部采用小驼峰方式
例：
.txtOverflow(@width:100%){display:block;width:@width;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
7．接口API命名：
(1) 统一使用const声明接口名称
(2) 接口名称：全部采用大驼峰，限2到3个词组20个字符以内
(3) 回调函数统一使用Promise函数，回调成功参数统一为res，错误参数为err
(4) 接口导出只能使用export {}按需导出，不能使用export default {}全量导出
例：
//获取用户信息constGetUserInfo=(params={})=>{returnnewPromise((resolve,reject)=>{getData(`/Beta.AuthMWeb/api/User/Get`,params,"get").then(res=>{if(res.State===0){resolve(res);}else{reject(res);}}).catch(err=>{console.error(err);reject(err);});});};export{GetUserInfo}
8．图片名称：
(1) 统一使用2倍图
(2) 统一使用下划线“_”连接
例：nav_right_back.png
9．路由名称:
(1) path路径/name路由名称/meta变量，全部采用小驼峰方式
(2) 路由全部采用按需引入
例：
{path:"/login",name:"login",meta:{needLogin:false,title:"登录页"},component:()=>import(/* webpackChunkName:"login" */"@/views/login/index.vue")},
10．其他名称：
以上命名规范中未提到的其他名称命名，全部采用小驼峰方式
二、TML规范
Html规范原则：1)、让浏览器更好、更快的解析代码 2)、让代码具有更好的可读性
1．所有具有开始标签和结束标签的元素都要写上起止标签
2．HTML标签名、属性统一用小写
例：
3．HTML标签元素属性值可以写上的都写上，尽可能的详细
例：
4．在Html中不能使用小于号“<”和大于号“>”，会影响浏览器解析，可使用字符实体
例：
查看更多>>
5．Html嵌套：
(1) 嵌套规则：块状元素可以嵌套行内元素，行内元素禁止嵌套块状元素
例：
div、p、ul.li等块状元素可以嵌套span、label、button，反之禁止使用
(2) Html中禁止使用空标签占位进行布局，可用padding和margin实现
(3) Html标签嵌套不能超过6层，否则就要重新考虑布局 或 拆分为组件
6．Html模板中应该只包含简单的表达式，复杂的表达式则应该重构为计算属性或方法
7．Html中vue的指令都是用缩写形式，例：‘@’ 和 ‘:’
8．必须为v-for设置唯一的key
9．正确的选择使用v-if和v-show
10．v-for和v-if、v-show不要同时使用在同一个标签上，可用""处理
11．Js和html中使用if/v-if判断时，多个条件互斥时，必须使用if-else if/v-if、v-else-if 语法，可提高代码效率
三、CSS规范
1．样式必须加上scoped，避免造成样式污染
例：
...
2．样式布局必须使用flex布局，禁止使用float布局
3．每个样式属性单独一行，属性名和属性值全部小写
4．所有样式都嵌套在父类选择器下，每个组件中style样式里只有一个样式根节点
例：
.page_main_css{position:relative;overflow:hidden;width:100%;display:flex;justify-content:center;align-items:center;&>.null_img{width:80px;}&>.txt_tip_p{font-size:12px;text-align:center;color:#999;}}
5．尽量少使用css范围选择器
例：
:not()，:last-child等
6．避免使用style设置Dom样式，尽可能用className来改变元素样式
四、JS规范
JS规范原则：简洁高效，增强可读性
1．必须优先使用 ES6,7 中新增的语法糖和函数
例：
箭头函数，await/async、解构、let、for...of等等
2．禁止使用var声明变量，用let和const
3．对上下文 this 的引用只能使用“_this”来命名
4．三元运算符和逻辑运算符不能超过3层
5．禁止项目中大量console.log和alert
6．Vue组件Prop定义必须详细
(1) 必须小驼峰方式命名
(2) 必须指定类型
(3) 必须加上required或者default，二者选其一
7．公用方法必须使用beta-jsdk和beta-util中的，禁止再次封装已存在的方法
8．Vue项目中禁止使用jQuery、zepto等操作Dom的组件库
9．禁止再Vue项目中直接操作Dom
10．推荐优先使用字符串模板进行字符串拼接
11．定义对象和对象的属性时，必须全部采用小驼峰方式命名
12．一个函数的长度控制在50行以内
13．一个函数的参数控制在6个以内，超过6个需要一对象的形式传参
14．将所有的import语句放在文件最前面
15．定义的Vue组件全部采用按需导入（公共组件库中除外：betafinance、betacommon）
例：
//阅读数量和历史早报const readHistory = () => import(/* webpackChunkName: "readHistory" */ "./plug/readHistory");
16．使用localStorage请使用beta-util中封装的stLS、gtLS、rmLS方法
17．页面跳转全部采用beta-jsdk中goTo方法
18．Js和html中使用if/v-if判断时，多个条件互斥时，必须使用if-else if/v-if、v-else-if 语法，可提高代码效率
五、注释
注释原则：详尽说明，方便记忆，便于维护
1．Html注释：
(1) 使用的组件模板和特殊作用的标签必须添加注释 例：
2．js注释：
(1) 引入的组件模板、第三方插件必须添加注释 例：
(2) data中每一个变量都必须添加注释 例：
(3) 每一个函数都必须添加注释，介绍函数的主要功能；若有参数，每一个参数都必须添加注释 例：
(4) 函数内部关键变量、复制逻辑或算法都必须添加注释 例：
(5) API接口每一个方法都必须添加注释 例：
(6) 父子组件传参props中的参数必须添加注释 例：
六、项目目录结构：
所有项目目录结构、目录名称必须统一（项目名称除外）
