ue 开发规范目录及说明

本文档为前端 vue 开发规范

• 规范目的
• 命名规范
• 结构化规范
• 注释规范
• 编码规范
• CSS 规范

规范目的

为提高团队协作效率

便于后台人员添加功能及前端后期优化维护

输出高质量的文档

命名规范

为了让大家书写可维护的代码，而不是一次性的代码

让团队当中其他人看你的代码能一目了然

甚至一段时间时候后你再看你某个时候写的代码也能看

普通变量命名规范

• 命名方法 ：驼峰命名法
• 命名规范 ：命名必须是跟需求的内容相关的词，比如说我想申明一个变量，用来表示我的学校，那么我们可以这样定义const mySchool="我的学校";命名是复数的时候需要加s,比如说我想申明一个数组，表示很多人的名字，那么我们可以这样定义const names=new Array();

常量

• 命名方法 : 全部大写
• 命名规范 : 使用大写字母和下划线来组合命名，下划线用以分割单词。

const MAX_COUNT=10
const URL='https://www.baidu.com/'
复制代码

组件命名规范

官方文档推荐及使用遵循规则：

PascalCase (单词首字母大写命名)是最通用的声明约定

kebab-case (短横线分隔命名) 是最通用的使用约定

• 组件名应该始终是多个单词的，根组件 App 除外
• 有意义的名词、简短、具有可读性
• 命名遵循 PascalCase 约定公用组件以 Abcd (公司名缩写简称) 开头，如（AbcdDatePicker,AbcdTable）页面内部组件以组件模块名简写为开头，Item 为结尾，如（StaffBenchToChargeItem，StaffBenchAppNotArrItem）
• 使用遵循 kebab-case 约定在页面中使用组件需要前后闭合，并以短线分隔，如（<abcd-date-picker></abcd-date-picker>，<abcd-table></abcd-table>）
• 导入及注册组件时，遵循 PascalCase 约定
• 同时还需要注意：必须符合自定义元素规范: 切勿使用保留字。

method 方法命名命名规范

• 驼峰式命名，统一使用动词或者动词+名词形式

  //bad
  go、nextPage、show、open、login

    // good
  jumpPage、openCarInfoDialog

复制代码

• 请求数据方法，以 data 结尾

  //bad
  takeData、confirmData、getList、postForm

  // good
  getListData、postFormData
复制代码

• init、refresh 单词除外
• 尽量使用常用单词开头（set、get、go、can、has、is）

附： 函数方法常用的动词:

get 获取/set 设置,
add 增加/remove 删除
create 创建/destory 移除
start 启动/stop 停止
open 打开/close 关闭,
read 读取/write 写入
load 载入/save 保存,
create 创建/destroy 销毁
begin 开始/end 结束,
backup 备份/restore 恢复
import 导入/export 导出,
split 分割/merge 合并
inject 注入/extract 提取,
attach 附着/detach 脱离
bind 绑定/separate 分离,
view 查看/browse 浏览
edit 编辑/modify 修改,
select 选取/mark 标记
copy 复制/paste 粘贴,
undo 撤销/redo 重做
insert 插入/delete 移除,
add 加入/append 添加
clean 清理/clear 清除,
index 索引/sort 排序
find 查找/search 搜索,
increase 增加/decrease 减少
play 播放/pause 暂停,
launch 启动/run 运行
compile 编译/execute 执行,
debug 调试/trace 跟踪
observe 观察/listen 监听,
build 构建/publish 发布
input 输入/output 输出,
encode 编码/decode 解码
encrypt 加密/decrypt 解密,
compress 压缩/decompress 解压缩
pack 打包/unpack 解包,
parse 解析/emit 生成
connect 连接/disconnect 断开,
send 发送/receive 接收
download 下载/upload 上传,
refresh 刷新/synchronize 同步
update 更新/revert 复原,
lock 锁定/unlock 解锁
check out 签出/check in 签入,
submit 提交/commit 交付
push 推/pull 拉,
expand 展开/collapse 折叠
begin 起始/end 结束,
start 开始/finish 完成
enter 进入/exit 退出,
abort 放弃/quit 离开
obsolete 废弃/depreciate 废旧,
collect 收集/aggregate 聚集
复制代码

views 下的文件命名

• 只有一个文件的情况下不会出现文件夹，而是直接放在 views 目录下面，如 index.vue
• 尽量是名词,且使用驼峰命名法
• 开头的单词就是所属模块名字（workbenchIndex、workbenchList、workbenchEdit）
• 名字至少两个单词（good: workbenchIndex）（bad:workbench）

props 命名

在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板中应该始终使用 kebab-case

<!-- bad -->
<script>
props: {
  'greeting-text': String
}
</script>

<welcome-message greetingText="hi"></welcome-message>

<!-- good -->
<script>
props: {
  greetingText: String
}
</script>

<welcome-message greeting-text="hi"></welcome-message>
复制代码

例外情况

1. 作用域不大临时变量可以简写，比如：str，num，bol，obj，fun，arr。
2. 循环变量可以简写，比如：i，j，k 等。

结构化规范

目录文件夹及子文件规范

• 以下统一管理处均对应相应模块
• 以下全局文件文件均以 index.js 导出，并在 main.js 中导入
• 以下临时文件，在使用后，接口已经有了，发版后清除

src                               源码目录
|-- api                              接口，统一管理
|-- assets                           静态资源，统一管理
|-- components                       公用组件，全局文件
|-- filters                          过滤器，全局工具
|-- icons                            图标，全局资源
|-- datas                            模拟数据，临时存放
|-- lib                              外部引用的插件存放及修改文件
|-- mock                             模拟接口，临时存放
|-- router                           路由，统一管理
|-- store                            vuex, 统一管理
|-- views                         视图目录
|   |-- staffWorkbench               视图模块名
|   |-- |-- staffWorkbench.vue       模块入口页面
|   |-- |-- indexComponents          模块页面级组件文件夹
|   |-- |-- components               模块通用组件文件夹
复制代码

vue 文件基本结构

  <template>
    <div>
      <!--必须在div中编写页面-->
    </div>
  </template>
  <script>
    export default {
      components : {
      },
      data () {
        return {
        }
      },
      mounted() {
      }，
      methods: {
      }
   }
  </script>
  <!--声明语言，并且添加scoped-->
  <style lang="scss" scoped>
  </style>
复制代码

多个特性的元素规范

多个特性的元素应该分多行撰写，每个特性一行。(增强更易读)

<!-- bad -->
<img src="https://vuejs.org/images/logo.png" alt="Vue Logo">
<my-component foo="a" bar="b" baz="c"></my-component>

<!-- good -->
<img
  src="https://vuejs.org/images/logo.png"
  alt="Vue Logo"
>
<my-component
  foo="a"
  bar="b"
  baz="c"
>
</my-component>
复制代码

元素特性的顺序

原生属性放前面，指令放后面

如下所示：

  - class
  - id,ref
  - name
  - data-*
  - src, for, type, href,value,max-length,max,min,pattern
  - title, alt，placeholder
  - aria-*, role
  - required,readonly,disabled
  - is
  - v-for
  - key
  - v-if
  - v-else-if
  - v-else
  - v-show
  - v-cloak
  - v-pre
  - v-once
  - v-model
  - v-bind,:
  - v-on,@
  - v-html
  - v-text
复制代码

组件选项顺序

如下所示：

  - components
  - props
  - data
  - computed
  - created
  - mounted
  - metods
  - filter
  - watch
复制代码

注释规范

代码注释在一个项目的后期维护中显得尤为重要，所以我们要为每一个被复用的组件编写组件使用说明，为组件中每一个方法编写方法说明

务必添加注释列表

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

单行注释

注释单独一行，不要在代码后的同一行内加注释。例如：

  bad

  var name=”abc”; // 姓名    

  good

  // 姓名
  var name=“abc”;         
复制代码

多行注释

组件使用说明，和调用说明
      /**
      * 组件名称
      * @module 组件存放位置
      * @desc 组件描述
      * @author 组件作者
      * @date 2017年12月05日17:22:43
      * @param {Object} [title]    - 参数说明
      * @param {String} [columns] - 参数说明
      * @example 调用示例
      *  <hbTable :title="title" :columns="columns" :tableData="tableData"></hbTable>
      **/
复制代码

编码规范

优秀的项目源码，即使是多人开发，看代码也如出一人之手。统一的编码规范，可使代码更易于阅读，易于理解，易于维护。尽量按照 ESLint 格式要求编写代码

源码风格

使用 ES6 风格编码

1. 定义变量使用 let ,定义常量使用 const
2. 静态字符串一律使用单引号或反引号，动态字符串使用反引号

  // bad
  const a='foobar'
  const b='foo' + a + 'bar'

  // acceptable
  const c=`foobar`

  // good
  const a='foobar'
  const b=`foo${a}bar`
  const c='foobar'
复制代码

3. 解构赋值

• 数组成员对变量赋值时，优先使用解构赋值

  // 数组解构赋值
  const arr=[1, 2, 3, 4]
  // bad
  const first=arr[0]
  const second=arr[1]

  // good
  const [first, second]=arr
复制代码

• 函数的参数如果是对象的成员，优先使用解构赋值

  // 对象解构赋值
  // bad
  function getFullName(user) {
    const firstName=user.firstName
    const lastName=user.lastName
  }

  // good
  function getFullName(obj) {
    const { firstName, lastName }=obj
  }

  // best
  function getFullName({ firstName, lastName }) {}
复制代码

4. 拷贝数组使用扩展运算符（...）拷贝数组。

  const items=[1, 2, 3, 4, 5]

  // bad
  const itemsCopy=items

  // good
  const itemsCopy=[...items]
复制代码

5. 箭头函数需要使用函数表达式的场合，尽量用箭头函数代替。因为这样更简洁，而且绑定了 this

  // bad
  const self=this;
  const boundMethod=function(...params) {
    return method.apply(self, params);
  }

  // acceptable
  const boundMethod=method.bind(this);

  // best
  const boundMethod=(...params)=> method.apply(this, params);
复制代码

6. 模块

• 如果模块只有一个输出值，就使用 export default，如果模块有多个输出值，就不使用 export default，export default 与普通的 export 不要同时使用

  // bad
  import * as myObject from './importModule'

  // good
  import myObject from './importModule'
复制代码

• 如果模块默认输出一个函数，函数名的首字母应该小写。

  function makeStyleGuide() {
  }

  export default makeStyleGuide;
复制代码

• 如果模块默认输出一个对象，对象名的首字母应该大写。

  const StyleGuide={
    es6: {
    }
  };

  export default StyleGuide;
复制代码

指令规范

1. 指令有缩写一律采用缩写形式

  // bad
  v-bind:class="{'show-left'：true}"
  v-on:click="getListData"

  // good
  :class="{'show-left'：true}"
  @click="getListData"
复制代码

2. v-for 循环必须加上 key 属性，在整个 for 循环中 key 需要唯一

  <!-- good -->
  <ul>
    <li v-for="todo in todos" :key="todo.id">
      {{ todo.text }}
    </li>
  </ul>

  <!-- bad -->
  <ul>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ul>
复制代码

3. 避免 v-if 和 v-for 同时用在一个元素上（性能问题）以下为两种解决方案：

• 将数据替换为一个计算属性，让其返回过滤后的列表

  <!-- bad -->
  <ul>
    <li v-for="user in users" v-if="user.isActive" :key="user.id">
      {{ user.name }}
    </li>
  </ul>

  <!-- good -->
  <ul>
    <li v-for="user in activeUsers" :key="user.id">
      {{ user.name }}
    </li>
  </ul>

  <script>
  computed: {
    activeUsers: function () {
      return this.users.filter(function (user) {
        return user.isActive
      })
    }
  }
  </script>
复制代码

• 将 v-if 移动至容器元素上 (比如 ul, ol)

  <!-- bad -->
  <ul>
    <li v-for="user in users" v-if="shouldShowUsers" :key="user.id">
      {{ user.name }}
    </li>
  </ul>

  <!-- good -->
  <ul v-if="shouldShowUsers">
    <li v-for="user in users" :key="user.id">
      {{ user.name }}
    </li>
  </ul>
复制代码

Props 规范

Props 定义应该尽量详细

// bad 这样做只有开发原型系统时可以接受
props: ['status']

// good
props: {
  status: {
    type: String,
    required: true,
    validator: function (value) {
      return [
        'syncing',
        'synced',
        'version-conflict',
        'error'
      ].indexOf(value) !==-1
    }
  }
}
复制代码

其他

1. 避免 this.$parent
2. 调试信息 console.log() debugger 使用完及时删除
3. 除了三目运算，if,else 等禁止简写

  // bad
  if (true)
      alert(name);
  console.log(name);

  // bad
  if (true)
  alert(name);
  console.log(name)

  // good
  if (true) {
      alert(name);
  }
  console.log(name);
复制代码

CSS 规范

通用规范

1. 统一使用"-"连字符
2. 省略值为 0 时的单位

 // bad
  padding-bottom: 0px;
  margin: 0em;

 // good
  padding-bottom: 0;
  margin: 0;
复制代码

3. 如果 CSS 可以做到，就不要使用 JS
4. 建议并适当缩写值，提高可读性，特殊情况除外“建议并适当”是因为缩写总是会包含一系列的值，而有时候我们并不希望设置某一值，反而造成了麻烦，那么这时候你可以不缩写，而是分开写。当然，在一切可以缩写的情况下，请务必缩写，它最大的好处就是节省了字节，便于维护，并使阅读更加一目了然。

  // bad
  .box{
    border-top-style: none;
    font-family: palatino, georgia, serif;
    font-size: 100%;
    line-height: 1.6;
    padding-bottom: 2em;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 0;
  }

  // good
  .box{
    border-top: 0;
    font: 100%/1.6 palatino, georgia, serif;
    padding: 0 1em 2em;
  }
复制代码

5. 声明应该按照下表的顺序

左到右，从上到下

  // bad
  .box {
    font-family: 'Arial', sans-serif;
    border: 3px solid #ddd;
    left: 30%;
    position: absolute;
    text-transform: uppercase;
    background-color: #eee;
    right: 30%;
    isplay: block;
    font-size: 1.5rem;
    overflow: hidden;
    padding: 1em;
    margin: 1em;
  }

  // good
  .box {
    display: block;
    position: absolute;
    left: 30%;
    right: 30%;
    overflow: hidden;
    margin: 1em;
    padding: 1em;
    background-color: #eee;
    border: 3px solid #ddd;
    font-family: 'Arial', sans-serif;
    font-size: 1.5rem;
    text-transform: uppercase;
  }
复制代码

6. 元素选择器应该避免在 scoped 中出现官方文档说明：在 scoped 样式中，类选择器比元素选择器更好，因为大量使用元素选择器是很慢的。
7. 分类的命名方法使用单个字母加上"-"为前缀布局（grid）（.g-）；模块（module）（.m-）；软件（unit）（.u-）；功能（function）（.f-）；皮肤（skin）（.s-）；状态（.z-）。
8. 统一语义理解和命名

布局（.g-）

模块（.m-）、软件（.u-）

功能（.f-）

皮肤（.s-）

状态（.z-）

sass 规范

1. 当使用 Sass 的嵌套功能的时候，重要的是有一个明确的嵌套顺序，以下内容是一个 SCSS 块应具有的顺序。当前选择器的样式属性父级选择器的伪类选择器 (:first-letter, :hover, :active etc)伪类元素 (:before and :after)父级选择器的声明样式 (.selected, .active, .enlarged etc.)用 Sass 的上下文媒体查询的选择器作为最后的部分

  .product-teaser {
    // 1. Style attributes
    display: inline-block;
    padding: 1rem;
    background-color: whitesmoke;
    color: grey;

    // 2. Pseudo selectors with parent selector
    &:hover {
      color: black;
    }

    // 3. Pseudo elements with parent selector
    &:before {
      content: "";
      display: block;
      border-top: 1px solid grey;
    }

    &:after {
      content: "";
      display: block;
      border-top: 1px solid grey;
    }

    // 4. State classes with parent selector
    &.active {
      background-color: pink;
      color: red;

      // 4.2. Pseuso selector in state class selector
      &:hover {
        color: darkred;
      }
    }

    // 5. Contextual media queries
    @media screen and (max-width: 640px) {
      display: block;
      font-size: 2em;
    }

    // 6. Sub selectors
    > .content > .title {
      font-size: 1.2em;

      // 6.5. Contextual media queries in sub selector
      @media screen and (max-width: 640px) {
        letter-spacing: 0.2em;
        text-transform: uppercase;
      }
    }
  }
复制代码

特殊规范

• 对用页面级组件样式，应该是有作用域的
• 对于公用组件或者全局组件库，我们应该更倾向于选用基于 class 的 BEM 策略

、语义化标签

1. 列表使用 ul li
2. 文字使用 p span em cite 等标签
3. 标题使用 h1 h2 等标签
4. 布局使用 section aside header footer article 等 HTML5 布局标签

2、自定义标签

使用自闭合标签的写法 小写加下划线

<template>
  <my-owner-components />
</template>

3、多特性分行写

为提高可读性 组件应用时换行 按照 ref、class、传入、传出 顺序书写

<template>
  <my-components
    ref="myComponents"
    class="home-my-components"
    :data="data"
    @changeHandle="changeHandle"
  />
</template>

4、行内使用表达式

在模版中 简单情况使用表达式 复杂情况使用计算属性或函数

<template>
  <!-- 简单情况 -->
  <div v-show="data.type===1">
    ...
  </div>
  <!-- 复杂情况 -->
  <div v-show="getTypeShow(data)">
    ...
  </div>
</template>

<script>
export default {
  methods: {
    /**
    * ***显示判断
    * @param data **
    */
    getTypeShow(data) {
      return data.type===1 && ...
    }
  }
}
</script>

5、避免重复

避免过多重复代码 果超过三行类似的代码 配置数据再循环遍历

6、代码嵌套

根据元素嵌套规范 每个块状元素独立一行 内联元素可选

<template>
  <!-- 情况1 -->
  <div>
    <h1></h1>
    <p></p>
    <p><span></span><span></span></p>
  </div>
  <!-- 情况2 -->
  <div>
    <h1></h1>
    <p></p>
    <p>
      <span></span>
      <span></span>
    </p>
  </div>
</template>

7、活用v-if v-show

v-show 不会改变dom树 不会导致重新渲染 用于频繁的切换显示隐藏
v-if 会改变dom树 会导致重新渲染 用于只控制一次显示隐藏

8、注释规范

<template>
  <!-- 标签注释 -->
  <div>
    ...
  </div>
  <!-- 组件注释 -->
  <my-owner-components />
</template>

CSS规范

1、避免使用

1. 避免使用标签选择器 因为在 Vue 中 特别是在局部组件 使用标签选择器效率特别低 损耗性能 建议需要的情况直接定义 class
2. 非特殊情况下 禁止使用 ID 选择器定义样式（有 JS 逻辑的情况除外）
3. 避免使用important选择器
4. 避免大量的嵌套规则 控制在3级之内 对于超过4级的嵌套 考虑重写或新建子项
5. 避免使用ID选择器及全局标签选择器防止污染全局样式

2、推荐使用

1. 提取公用样式进assets文件styles里 按模块/功能区分
2. 使用 scoped 关键字 约束样式生效的范围
3. 可复用属性尽量抽离为页面变量 易于统一维护
4. 使用混合（mixin）根据功能定义模块 然后在需要使用的地方通过 @include 调用 避免编码时重复输入代码段

3、书写顺序

CSS 属性书写顺序 先决定定位宽高显示大小 再做局部细节修饰
定位属性(或显示属性 display)=> 宽高属性=> 边距属性(margin padding)=> 背景 颜色 字体等修饰属性的定义 这样定义为了更好的可读性 让别人只要看一眼就能在脑海中浮现最终显示的效果

.class-name {
  position: fixed;
  top: 100px;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 10px;
  padding: 10px;
  background-color: red; 
  border-radius: 2px;
  font-size: 14px;
  color: #000;
  line-height: 1.42;
}

4、样式覆盖

组件内部需要覆盖UI框架样式 必须在最外层组件加类名

<template>
  <div class="input-container">
    <el-input class="name-input"></el-input>
  </div>
</template>

<style lang="scss">
.input-container {
  .name-input {
    .el-input__inner {
      font-size: 16px;
    }
  }
}
</style>

5、注释规范

以 / 注释内容 / 格式注释 前后空格 嵌套子类需要一个回车分割开

/* 注释内容 */
.class-name {
  width: 20px;
  
   /* 这里需要换行 */
  .class-name-l {
    color: blue
  }
}

JS规范

1、用法规范

1. 在vue-cli 脚手架使用架自带的指向 src 开发目录的 '@' 符号引入文件资源
2. 使用 template 或计算属性规避 v-if 和 v-for 用在一起
3. 统一使用单引号
4. 坚持单一原则 函数内仅做该函数应该做的 尽量避免通过传入标记控制不同行为
5. 优先考虑三目运算符 但不要写超过3层的三目运算符
6. 对于无用代码必须及时删除 例如：一些调试的 console 语句、无用的弃用功能代码
7. 请求数据的方法使用try catch 错误捕捉 注意执行回调

2、组件顺序规范

<script>
export default {
  name: 'ExampleName',        // 这个名字推荐：大写字母开头驼峰法命名
  props: {},                  // Props 定义
  components: {},             // 组件定义
  directives: {},             // 指令定义
  mixins: [],                 // 混入 Mixin 定义。
  data () {                   // Data 定义。
    return {
      dataProps: ''           // Data 属性的每一个变量都需要在后面写注释说明用途，就像这样
    }
},
  computed: {},               // 计算属性定义。
  watch: {},                  // 属性变化监听器。
  created () {},              // 生命钩子函数，按照他们调用的顺序。
  mounted () {},              // 挂载到元素。
  activated () {},            // 使用 keep-alive 包裹的组件激活触发的钩子函数。
  deactivated () {},          // 使用 keep-alive 包裹的组件离开时触发的钩子函数
  methods: {                  // 组件方法定义。
    publicbFunction () {}     // 公共方法的定义，可以提供外面使用
    _privateFunction () {}    // 私有方法，下划线定义，仅供组件内使用。多单词，注意与系统名字冲突！
  }
}
</script>

3、注释规范

函数/方法注释必须包含函数说明，有参数和返回值时必须使用注释标识，它的作者, 依赖关系和兼容性信息。

1. 单行注释：双斜线后应跟空格，且缩进与上下文的代码保持一致；或在行尾注释，在行尾依然需要左右空格

// 注释
const userID=24
const userID=12 // 注释

2. 多行注释：一般用于注释难以理解的、可能存在错误的、逻辑强的代码，且缩进一致

/*
 * 针对下方代码的说明
 * 第一行太长写第二行
 */
const aa=1

3. 函数注释：写明传入参数名称、类型推荐完整注释以下格式

/**
 * @Description 加入购物车
 * @Author luochen_ya
 * @Date 2024-03-13
 * @param {Number} goodId 商品id
 * @param {Array<Number>} specs sku规格
 * @param {Number} amount 数量
 * @param {String} remarks 备注
 * @returns <Promise> 购物车信息
 */
apiProductAddCard=(goodId, specs, amount, remarks)=> {
  return axios.post('***', { goodId, specs, amount, remarks })
}

4. 文件注释：写明文件描述

/**
 * @Description: 文件描述
 * @Author: luochen_ya
 * @Date: 2024-03-13
 */

命名规范

1、目录命名

按照小驼峰命名 首字母小写

1. 项目文件夹：projectName
2. 样式文件夹：css / scss
3. 脚本文件夹：js

2、图片命名

图片就是img开头 图标就是icon开头

1. img_功能_模块_编号
2. icon_功能_模块_编号

3、文件命名

1. 按照小驼峰命令 英文单词过长或超出2个以上 可缩略至前四位 列如：comming_soon.png 等
2. 有复数含义 采用复数命名 列如：minixs styles images icons 等
3. 静态资源命名格式为小写 + 下划线 列如：icon_arrow.png img_logo.png 等
4. 组件命名为小驼峰 公用组件加上gd前缀 列如：gdOwnerComponents 等

4、方法命名

method 方法命名不同于文件命名，尽量完整英文命名，语义表达需完整清楚

1. 按照小驼峰命名法 可使用常见动词约定

• can： 判断是否可执行某个动作 函数返回一个布尔值 true可执行 false不可执行
• has： 判断是否含有某个值 函数返回一个布尔值 true含有此值 false不含有此值
• is： 判断是否为某个值，函数返回一个布尔值 true为某个值 false不为某个值
• get： 获取某个值 函数返回一个非布尔值
• set： 设置某个值 无返回值或者返回是否加载完成的结果

2. 语义化英文命名 仅组件内部使用方法前加上_（下划线）区分

<script>
export default {
  methods: { // 组件方法定义
    publicbFunction () {} // 公共方法的定义 可以提供外面使用
    _privateFunction () {} // 私有方法 下划线定义 仅供组件内使用
  }
}
</script>

3. 引入组件：首字母大写的驼峰法命名

import MyOwnerComponents from '@/components/MyOwnerComponents'

4. 变量：使用驼峰式命名 优先使用 let const 避免使用 var

let userName='luochen_ya'
const userInfo={
  name: 'luochen_ya',
  age: 24
}

5. 常量：字母全部大写 以下横线 _ 划分

const Constant={
  // 公用状态
  COMMON_STATUS_ENABLE=1, // 启用
  COMMON_STATUS_DISABLE=2, // 停用
}

5、样式命名

class命名以小写字母开头 小写字母、中划线和数字组成 以下是一些常用到的 class的名字

1. 包裹层: .xxx-wrap
2. 列表: .xxx-list
3. 列表项: .xxx-list-item
4. 左边内容: .xxx-left
5. 中间内容: .xxx-middle
6. 右边内容: .xxx-right
7. 某个页面：.xxx-page

6、常用词

1. 常用动词

• get=> 取值
• set=> 给值
• add=> 新增
• remove=> 移除
• show=> 显示
• hide=> 隐藏
• view=> 查看
• browse=> 浏览
• edit=> 修改
• save=> 保存
• delete=> 删除
• find=> 查询
• undo=> 撤销
• redo=> 重做
• clean=> 清除
• index=> 索引
• observe=> 观察
• send=> 发送
• receive=> 接收
• refresh=> 刷新
• synchronize=> 同步

2. 常用缩写

• object=> obj
• array=> arr
• function=> fn
• message=> msg
• button=> btn

工程结构

1、目录构建

├── api                       所有api接口
├── assets                    靜態資源
│   ├── fonts                   全局公用字体
│   ├── icons                   全局公用图标
│   ├── images                  全局公用图片
│   └── styles                  全局公用样式
├── components                公用組件
│   ├── base                    基础组件
│   └── business                业务组件
├── constants                 常量 统一管理
├── locales                   多语言管理
├── plugins                   插件 统一管理
├── router                    路由 统一管理
│   └── index.js               
├── store                     vuex 统一管理
│   ├── modules                 
│   ├── getters.js              
│   └── index.js                
├── utils                     工具函数 统一管理
├── views                     视图目录（所有业务逻辑的页面）

2、代码风格

可以直接使用eslint 强制统一代码规范 还能规避一些语法错误 或者按照以下自己定义的去配置eslint来使用
以下是个人习惯 仅供参考

1. 首行缩进2空格
2. js代码去除分号
3. html代码超出255字符一行进行换行操作
4. js代码统一使用单引号或双引号

页的生命周期长的，更需要特别注意后期的可维护性。「欲求其上而得中,欲求其中而得下」

https://www.kwgg2020.com/

HTML规范

页面语言lang

推荐使用属性值 cmn-Hans-CN（简体, 中国大陆），
但是考虑浏览器和操作系统的兼容性，目前仍然使用 zh-CN 属性值 <html lang="zh-CN">
lang="en" 表示此页面定位为英文网页，这都是给搜索引擎看的，
你的站点是中文站，对html本身不会有影响，现在都讲究html规范，你的页面越规范，就越容易被收录

细节决定成败，耐心铸造不朽

//html 标签
标签必须合法且闭合、嵌套正确，标签名需小写
标签语法无错误，需要符合语义化
标签的自定义属性以data-开头，如：<a href="#" data-num='18'></a>
除非有特定的功能、组件要求等，禁止随意使用id来定义元素样式

//链接
给 <a> 标签加上title属性
<a>标签的href属性必须写上链接地址，暂无的加上javascript：alert('敬请期待！')
非本专题的页面间跳转，采用打开新窗口模式：target="_blank"

//https协议自适应
//将调用静态域名 ossweb-img.qq.com 以及 game.gtimg.cn 的外部请求，
//写法上一律去掉协议http:部分，采用自适应的写法。具体方法如下：
<style>
.bg{background: url(//game.gtimg.cn/images/cf/cp/a20161021sqjs/hd.jpg) no-repeat;}
</style>
//链接URL
<a href="//cf.qq.com/main.shtml">进入官网</a>
//图片SRC
<img src="//game.gtimg.cn/images/logo.png">
//JS链接
<script src="//ossweb-img.qq.com/images/js/title.js"></script>
  
//flash
  页面禁止使用flash，动画使用video，css3，canvas等，低版本浏览器使用背景图片降级。

css规范

//选择器
CSS类名命名
禁止使用层级过深的选择器，最多3级。
除非有特定的功能、组件要求等，禁止随意使用id来定义元素样式
除非是样式reset需要，禁止对纯元素选择器设置特定样式，避免样式污染

//reset.css
a, img {-webkit-touch-callout: none; /* 禁止长按链接与图片弹出菜单 */}
html, body {
    -webkit-user-select: none;   /* 禁止选中文本（如无文本选中需求，此为必选项） */
    user-select: none;
}

//移动端字体
移动端页面不支持微软雅黑，宋体等中文字体，终端浏览器字体取决于设备上的系统字体。
那么在移动端h5如何定义字体呢font-family呢，一般会用@font-face定义微软雅黑字体并
存到web服务器上，在需要使用时被自动下载，但这样操作很消耗用户流量 

//##ios系统
默认中文字体是Heiti SC
默认英文字体是Helvetica
默认数字字体是HelveticaNeue
无微软雅黑字体

//##android 系统
默认中文字体是Droidsansfallback
默认英文和数字字体是Droid Sans
无微软雅黑字体

//各个手机都有自己的默认字体，一般不支持我们常用字体，比如微软雅黑等，
除非特殊要求，一般手机无需定义中文字体，使用系统默认即可。
英文和数字字体可以使用 Helvetica都支持。
/* 移动端定义字体的代码 */
body{font-family:Helvetica;}

图片处理

//图片优化
图片体积不能超过300K
JPG图片必须压缩，一般80%品质即可，保证文字清晰
JPG图片必须使用渐进式图片：使用Photoshop的“存储为web所用格式”时候，勾选“连续”
透明PNG图片必须使用压缩工具压缩后提供

//图片标签
PC端img图片必须填写width、height、alt属性
移动端必须填写alt属性
alt不能为无意义字符，需要能表现出图片的含义，如图片为道具图，则应该为道具的名称

//合理切图
装饰性图片合并成精灵图，减少页面请求

注释与命名