前端开发规范 ​

1、驼峰式命名法介绍 ​

• Pascal Case 大驼峰式命名法：首字母大写。eg：RequestScanQrcode、UserInfo、GetQueryString
• Camel Case 小驼峰式命名法：首字母小写。eg：requestScanQrcode、userInfo、getQueryString

2、命名规范 ​

• 项目命名

  全部采用小写方式,项目包含多个单词时，单词之间建议使用半角的连词线 ( - ) 进行分隔。 例：dvs-sunlight-tech

• 目录命名

  1、参考项目命名。 例：popup-message 2、有复数结构时，要采用复数命名法。例：scripts，styles，images，views，components，utils 等

• JS 和 VUE 文件命名

  1、参考项目命名。例：column-tree、investigate 等 2、注意：components 中的组件名称使用大驼峰命名方式，在 template 模板中引用组件时全部采用小写中间使用（-）进行分隔。

• CSS、SCSS 文件命名

  参考项目命名。例：variable.scss、element-theme.scss 等

3、CSS、SCSS 规范 ​

• 缩进（个人用的 tab，也可以直接使用空格）

  使用 tab 缩进（2 个空格）

  css

  .right-chart {
    position: relative;
    width: 30%;
    background: #f2f2f2;
  }

• 分号

  每个声明后都加分号

  css

  .right-chart {
    position: relative;
    width: 30%;
    background: #f2f2f2;
  }

• 命名

  • 类名使用小写字母，单词之间建议使用半角的连词线 ( - ) 进行分隔。例：village-list
  • id 采用小驼峰式命名。例：villageDialog
  • scss 中的变量、函数、混合、placeholder 采用小驼峰式命名
  css

  /* class */
  .village-list {
  
  }
  
  /* id */
  #villageDialog {
  
  }
  
  /* 变量 */
  $themeColor: #000;

4、JavaScript 规范 ​

• 缩进

  使用 Tab 缩进（两个空格）

• 分号

  每个声明结束都要加分号

• 命名

  • 标准变量采用小驼峰式命名
  • 常量全大写，用下划线连接
  javascript

  data() {
    return {
      pickerOptions: {}  // 小驼峰式
    }
  };
  const MAX_COUNT = 10; // 常量全大写

• 注释

  • 单行注释 注释单独一行的情况下，注释的//后面要跟一个空格 注释如果和代码同一行，代码分号结束后，要跟一个空格，注释的//后也要跟一个空格

// 调用函数
select();

const maxCount = 10; // 这是一个变量

• 多行注释 多行注释使用下面这种形式：

  javascript

  /**
   * 代码注释1
   * 代码注释2
   */

  多行注释建议在以下几种情况使用：

  • 难于理解的代码段
  • 可能存在错误的代码段
  • 业务逻辑强相关的代码

5、git 提交的用户名和邮箱设置 ​

git config --global user.name "xxx"
  git config --global user.email "987654321@qq.com"