• 说明：进入正式开发前需要提交 package-lock.json，正式开发后慎用 npm update

• 启动为 dev 环境：npm run serve 或 npm start
• 打包为 prod 环境：npm run build
• 检查并修复源码：npm run lint

名称大小写

<script>
  import MyComponent from '@/components/MyComponent.vue' // 文件名使用 PascalCase 命名法
  export default {
    name: 'ComponentName', // 必须有 name
    components: { MyComponent },
  }
</script>

<template>
  <div>
    <!-- 在 template 中一律使用 kebab-case 方式调用 -->
    <my-component />
    <el-input />
  </div>
</template>

使用前缀

• 非业务通用组件使用 Base 前缀
• 扩展/包装第三方开源组件或内部公共库组件 (不建议使用高阶组件) 使用 Ex 前缀
• 单例组件使用 The 前缀

• this.$refs 一般用在第三方开源组件或内部公共库组件或非常稳定的组件，以调用显式声明的方法
• 在万不得已的情况下需要暴露方法给外部调用时需要加 pub 前缀，如：this.$refs.pubFocus()

js 变量声明尽量使用 const

js 变量或对象属性使用驼峰命名法

js 私有变量或对象私有属性使用 _ 前缀 (注意: vue 组件属性不要使用 _ 前缀)

// 表明该变量仅在 createId 方法中使用 (与 createId 方法紧挨着)
let _count = 0
const createId = () => `${Date.now()}_${++_count}`

// 适时使用立即执行函数可以简洁作用域及保护私有变量
const createId = (() => {
  let count = 0
  return () => `${Date.now()}_${++count}`
})()

导入模块时不要省略后缀（js 除外），利于 IDE 感知

导入当前目录以外的模块时，建议使用'@'别名

// js
import XxxXxx from '@/components/XxxXxx.vue'

<!-- template -->
<img src="@/assets/logo.png" />

/* style */
@import '~@/styles/vars.less';
.xxx {
  background: url('~@/assets/logo.png');
}

严格遵守 ESLint 语法校验，警告级别的也要处理 (暂时用不到的代码可以先注释掉)

文件头部注释

• 脚本文件、样式文件

  /**
   * 说明
   * @author 作者
   */

• vue 文件

  <!-- 说明 -->
  <!-- @author 作者 -->

js 注释 (结合 JSDoc 注释标准，帮助 IDE 智能感知)

• 注释格式

  /**
   * 较为复杂的方法、大的区块、JSDoc
   */
  
  /* 一般的区块 */
  
  // 小的区块、行

• ES 2015 Modules

  /**
   * 使用 param 表示函数形参
   * 使用 returns 表示函数返回值
   * @param {类型} data
   * @param {object} [options] 可选参数
   * @param {类型} options.xxx
   * @param {类型 =} options.yyy 可选属性
   * @returns {类型}
   */
  export function myMethod(data, options) {}
  
  /**
   * 使用 type 进行类型断言
   * @type {import('vue-router').RouteConfig[]}
   */
  const routes = []
  
  /**
   * 使用 typedef 定义类型，方便多处使用（命名时需要首字母大写）
   * @typedef {routes[0]} RouteConfig
   * @param {(meta: object, route: RouteConfig) => boolean} filterCallback
   * @returns {RouteConfig[]}
   */
  export const filterMapRoutes = function(filterCallback) {}
  
  /**
   * 类型参考：https://www.tslang.cn/docs/handbook/basic-types.html
   *
   * 基本
   * @type {boolean}
   * @type {number}
   * @type {string}
   * @type {1 | 2 | 3}
   * @type {'a' | 'b' | 'c'}
   *
   * 数组
   * @type {Array}
   * @type {string[]}
   *
   * 函数
   * @type {Function}
   * @type {(data) => void}
   * @type {(data: Array) => void | boolean}
   *
   * 对象
   * @type {object}
   *
   * 联合
   * @type {number | string}
   * @type {boolean | (() => boolean)}
   *
   * 导入 ts 类型
   * @type {import('xxx').yyy}
   *
   * 从现有的 js 变量或 ts 类型进行推导
   * @type {Parameters<fn>} 取函数形参的类型
   * @type {Parameters<fn>[0]} 取函数第一个形参的类型
   * @type {ReturnType<fn>} 取函数返回值的类型
   * @type {obj['xxx']} 取指定属性值的类型（不能使用点语法）
   * ...
   */

• ES 2015 Classes

vue template 注释

• 适当使用注释与空行

  <!-- 说明 -->
  <div>block1</div>
  
  <!-- 说明 -->
  <div>block2</div>