Skip to main content

开发规范

开发规范

1.开发环境设置

1.1 编辑器：推荐 vs code

1.2 包管理工具：npm

1.3 代码版本控制：git

  • 为了加速安装依赖，将npm源地址切换为阿里源：
npm config set registry https://registry.npmmirror.com

1.4 开启性能监视器

  • 凡是出现cpu占用100%持续2秒以上的，即需要性能优化

2.JS代码开发规范

2.1 配置ESLint

  • 代码规范采用ESLint默认配置
  • package.json配置，开启ESLint
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },

2.2 编写开发日志

  • 在项目根目录创建README.md文档，将每天完成的功能或是修复优化的功能，做一个记录
#### 发布版本：V12.0.1
#### 发布日期：2021-10-14
#### 更新内容
* 优化
    * 功能/UI优化。 (姓名) 
* 修复
    * bug修复-禅道bug编号。（姓名）
* 迭代
    * 新增的功能/UI。（姓名）

2.3 注解规范

  • vue文件：多行注解，在script标签内部上方编写
<template>
 <div></div>
</template>

<script>
/**
 * 布局编辑器 明细视图
 * 功能：
 *  1. 显示布局编辑器
 *  2. 显示布局编辑器的定制区
 */
export default {
  name: "DetailView", //明细视图
};
</script>

<style lang='scss' scoped>

</style>
  • data变量：使用单行注解，在变量上方编写。
  data() {
    return {
      // 是否显示dialog
      dialogVisible: false,
    };
  },
  • props变量：使用单行注解，在变量上方编写。
props: {
    // 数据类型
    type: {
      type: String,
      default: "text",
    },
    // 文本输入最大长度
    maxLength: {
      type: Number,
      default: 48,
    },
}
  • functions方法：多行注解，在方法上方编写。
    /**
     * 防抖函数：最后一次点击有效
     * @param {function} fn 回调防范
     * @param {number} delay 延迟时间，单位秒
     * @returns {function} 返回函数
     */
    debounce(fn, delay) {
        let timer = null;
        return function () {
            if (timer) {
                clearTimeout(timer)
            }
            timer = setTimeout(() => {
                fn.apply(this, arguments)
                timer = null
            }, delay)
        }
    }

3.CSS样式规范

  • 所有样式使用scss编写，并设置scoped。样式类需要简单写下注解
// 样式必须写入style标签里，并且设置scoped
<style lang="scss" scoped>
// 引入的样式，必须放入style标签里
@import "@/style/cloudccStyle.scss";
</style>
  • 统一项目css，通用的样式使用clouccStyle.scss中的变量,无需单独引用，直接使用
<style lang="scss" scoped>
// 已配置全局引入变量插件，无需单独引用
// @import "@/style/cloudccStyle.scss";
.demoBox{
    background-color: $--color-primary;
}
</style>