（我的）项目基本规范编写 HTML 代码时，尽量避免多余的无意义的父元素。全局变量以及常量, 使用全部字母大写，单词间

项目基本规范

HTML 规范
1. 模块注释（尽量标记模块）
```
<template>
  
  <div class="inner-content order-manage-content">
  ...
  </div>
</template>
```
1. 标签属性顺序
  - class
  - id、name
  - data-*
  - src、for、type、href
  - title、alt
  - aria-*、role
2. 编写 HTML 代码时，尽量避免多余的无意义的父元素。
CSS 规范
1. 命名规范
  
  一律小写英文命名短且语义化多单词连接（建议使用 BEM 命名原理）
  个人推荐可以按照
  父组件：文件名称-元素–修饰符来进行命名
  子组件：文件名称-组件名称-元素–修饰符来进行命名
2. 数值：小于 1 的小数，可省略 0，opacity: .4，为 0 的就不要单位 margin: 0;
3. 颜色：统一使用十六进制（小写）
JS 规范
1. 命名规范
  - 全局变量以及常量, 使用全部字母大写，单词间下划线分隔的命名方式。
  - 一般变量, 使用 Camel（驼峰）命名法。
  - 私有属性、变量和方法以下划线 _ 开头
  - 构造函数和类以大写字母开头
2. 函数注释：简单描述函数作用以及参数
3. 三元操作符和 switch 用于替代 if 条件判断语句
4. 善用&& 和 ||（二元布尔操作符是可短路的, 只有在必要时才会计算到最后一项）
5. 特殊语法
  - 解构赋值
```
// 数组解构赋值
const arr = [1, 2, 3, 4];
// 推荐
const [first, second] = arr;
// 不推荐
const first = arr[0];
const second = arr[1];

// 对象解构赋值
// 推荐
function getFullName(obj) {
  const { firstName, lastName } = obj;
}
// best
function getFullName({ firstName, lastName }) {}
// 不推荐
function getFullName(user) {
  const firstName = user.firstName;
  const lastName = user.lastName;
}
```
  - 拷贝数组
    使用扩展运算符（...）拷贝数组。
```
const items = [1, 2, 3, 4, 5];
// 推荐
const itemsCopy = [...items];
// 不推荐
const itemsCopy = items;
```
  - 箭头函数
    需要使用函数表达式的场合，尽量用箭头函数代替。因为这样更简洁，而且绑定了 this
```
// 推荐
const boundMethod = (...params) => method.apply(this, params);
// 不推荐
const self = this;
const boundMethod = function(...params) {
  return method.apply(self, params);
};
```
  - 模块
    - 如果模块只有一个输出值，就使用 export default，如果模块有多个输出值，就不使用 export default，export default 与普通的 export 不要同时使用
```
// 推荐
import myObject from './importModule';
// 不推荐
import * as myObject from './importModule';
```
    - 如果模块默认输出一个函数，函数名的首字母应该小写
```
function makeStyleGuide() {}
export default makeStyleGuide;
```
    - 如果模块默认输出一个对象，对象名的首字母应该大写
```
const StyleGuide = {
  es6: {}
};
export default StyleGuide;
```
VUE 规范
- 组件命名规范
  1. 组件名应该始终是多个单词的，根组件 App 以及 <transition>、<component> 之类的 Vue 内置组件除外。可以避免跟现有的以及未来的 HTML 元素冲突，因为所有的 HTML 元素名称都是单个单词的。
  2. 单文件组件的文件名应该以单词大写开头 (PascalCase)
    - 页面模块命名方式（如：订单管理 --> OrderManage.vue）
    - 弹窗组件命名方式(业务名-dialog)（如：退款审核 -- > RefundAuditDialog.vue）
  3. 在单文件组件、字符串模板和 JSX 中没有内容的组件应该是自闭合的——但自定义组件永远不要这样做
  4. 在单文件组件和字符串模板中组件名应该总是 PascalCase（大写字母开头）的——但是在 DOM 模板中总是 kebab-case（短横线连接）的。
- 标签属性自动换行
```
<a 
  :href="item.onestore_url"
   target="_blank"
   @click="onToDownload()"
/>
```
- props 命名规范
  1. prop 的定义应该尽量详细
    细致的 prop 定义有两个好处：
    - 它们写明了组件的 API，所以很容易看懂组件的用法；
    - 在开发环境下，如果向一个组件提供格式不正确的 prop，Vue 将会告警，以帮助你捕获潜在的错误来源。
    - 组件 props 原子化、提供默认值、使用 type 属性校验类型、使用 props 之前先检查该 prop 是否存在
```
// 不推荐 这样做只有开发原型系统时可以接受
   props: ['status']
   
// 推荐
   props: {
     status: {
       type: String,
       required: true,
       validator: function (value) {
         return [
           'syncing',
           'synced',
           'version-conflict',
           'error'
         ].indexOf(value) !== -1
       }
     }
   }
```
  2. prop名大小写
    
    在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板和 JSX 中应该始终使用 kebab-case。
- vue 文件
  1. 组件/实例的选项应该有统一的顺序
    - components
    - props
    - data
    - created
    - mounted
    - activited
    - update
    - beforeRouteUpdate
    - metods
    - filter
    - computed
    - watch
  2. v-if和v-show按照场景使用
  1. v-if 切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件适合运营条件不大可能改变
  2. v-show 只是简单的基于css切换适合频繁切换
  1. 框架事件与自定义事件
  框架事件必须以on开头（如：@click="onTabSwitch"）
  自定义事件必须以handle开头（如：@click="handleTabSwitch"）
注释规范
代码注释在一个项目的后期维护中显的尤为重要，所以我们要为每一个被复用的组件编写组件使用说明，为组件中每一个方法编写方法说明。

以下情况，务必添加注释

1.公共组件使用说明
2.各组件中重要函数或者类说明
3.复杂的业务逻辑处理说明
4.特殊情况的代码处理说明,对于代码中特殊用途的变量、存在临界值、函数中使用的hack、使用了某种算法或思路等需要进行注释描述
5.注释块必须以/**（至少两个星号）开头**/；
6.单行注释使用//；
7.多重 if 判断语句

（我的）项目基本规范

项目基本规范

组件命名规范

标签属性自动换行

props 命名规范

vue 文件