前端开发规范

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 个空格）

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

• 分号

  每个声明后都加分号

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

• 命名

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

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

4、JavaScript 规范

• 缩进

  使用 Tab 缩进（两个空格）

• 分号

  每个声明结束都要加分号

• 命名

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

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

• 注释

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

    // 调用函数
    select();
    
    const maxCount = 10; // 这是一个变量

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

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

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

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

5、git commit 时提交的描述性信息

```javascript
// 'feat: 新增村情概况页面布局'
// 'fix: 修复村情概况接口报错的异常'
// 'docs: 修改接口字段备注'
// 'style: 村情概况代码对齐'
// 'refactor: 村情概况富文本展示代码重写'
// 'chore: 添加element-plus ui库依赖包'
// 'css: 修改村情概况样式'
    feat: 新特性
    fix: 修改问题
    refactor: 代码重构
    docs: 文档修改
    css: 布局样式调整
    style: 代码格式修改, 注意不是 css 修改
    chore: 其他修改, 比如构建流程, 依赖管理、版本好修正.
```

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

```javascript
    git config --global user.name "刘启明"
    git config --global user.email "455043818@qq.com"
```

6、vetur 开启；eslint、prettier 设置