一、目标

统一代码风格、命名规范，增强代码可读性和可维护性，供日常开发工作中时参考，以提高团队协作的开发效率。

为保证代码统一，请大家务必严格遵守,严格执行

二、基本架构

三、编程规约

项目命名

• 全部采用串行命名法：小写方式， 以中划线分隔
• 规则

<business>-<type>-<features>-<country>

• 示例：test-h5-co、test-h5-repayment-co

代码组织目录规范

全部采用小驼峰camelCase命名方式；有复数结构时，要采用复数命名法， 缩写不用复数

• 如果文件为对外不可见子模块，文件名称以下画线“_”为前缀，所有子模块/组件只能由本模块/组件的入口文件引用

• 构建产出文件目录（推荐：/dist/）

  • 开发环境：development
  • 测试环境：test
  • 线上环境：production

• 工程配置文件目录（推荐：/config/）

• 单元测试文件目录（推荐：/tests/）

  • e2e测试：e2e/
  • unit测试：unit/

• 媒体资源目录（推荐：/src/assets/）

  • 图片：images/
  • 字体：fonts/
  • 样式：styles/

• 源码文件单独目录（推荐：/src/views/）

• 第三方框架和自定义插件目录（推荐：/src/plugins/）

  • 一定要有入口文件index,如果有插件需全局引入，所有引入配置需要配置到index文件中

• 接口服务目录（推荐：/src/service/）

  • 封装ajax请求：http.js
  • 接口配置文件：/fetch/

• 状态管理目录（推荐：/src/store/）

  • app 基础文件: app.js
  • 各模块文件：/modules/**.js
  • 入口文件：index.js

• 路由目录（推荐：/src/router/）

  • 权限文件：_permission.js
  • 其他页面文件：根据模块区分
  • 入口文件：index.js

• 国际化目录（推荐：/src/i18n/）

  • 语言目录:lang/zh/等
  • 入口文件：index.js

• 组件库目录（推荐：/src/components/）

  • 组件：dialog/等
  • 入口文件：index.js

• 工具类目录（推荐：/src/utils/）

命名规范

文件夹命名

全部采用小驼峰camelCase命名方式

组件规范

单文件组件（包括components下以及views【特例：在np-h5-app项目中，因为生成的是多页面，需要使用串行方式：全部小写字母，用中划线‘-’连接】）的文件名始终是单词大写开头，使用大驼峰 (PascalCase)的命名方式，单词大写开头对于代码编辑器的自动补全最为友好

• 基础组件名

应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头:APP，例如：APPHeader.vue

• 单例组件名

只应该拥有单个活跃实例的组件应该以 The 前缀命名，以示其唯一性；

这些组件永远不接受任何 prop，如果你发现有必要添加 prop，那就表明这实际上是一个可复用的组件，不建议使用The为前缀

• 紧密耦合的组件名

和父组件紧密耦合的子组件应该以父组件名作为前缀命名,例如：SearchSidebar

• 组件名中的单词顺序

组件名应该以高级别的 (通常是一般化描述的) 单词开头，以描述性的修饰词结尾。例如：SearchButtonClear.vue

• 自闭合组件

在单文件组件、字符串模板和 JSX 中没有内容的组件应该是自闭合的,注意：在 DOM 模板里永远不要这样做，例如：

• 模板中的组件名大小写：大驼峰
• JS/JSX 中的组件名大小写：大驼峰
• 完整单词的组件名

Prop命名

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

• 必须指定类型
• 必须加上注释，表明其含义
• 必须加上default
• 如果有业务需要，必须加上 validator 验证

props: {

  greetingText: String

}

<WelcomeMessage greeting-text="hi"/>

CSS、SCSS、HTML、PNG 文件命名规范

全部采用小写方式， 以中划线分隔

Javascript 规范

• 文件命名：全部采用小驼峰方式，如果文件为对外不可见子模块，以下画线“_”前缀
• 方法名、参数名、成员变量、局部变量都统一使用 camelCase 风格，必须遵从驼峰形式。

示例： localValue / getHttpMessage() / inputUserId

其中 method 方法命名必须是 动词 或者 动词+名词 形式

动词	含义	返回
has	判断是否含有某个值、变量命名同样适用	函数返回一个布尔值。true：含有此值；false：不含有此值
is	判断是否为某个值、变量命名同样适用	函数返回一个布尔值。true：含有此值；false：不含有此值
get	获取某个值	函数返回一个非布尔值
set	设置某个值	无返回值、返回是否设置成功或者返回链式对象

特此说明，调用服务端接口必须使用以下方式定义

create / update / delete / get / getDetail

• 常量命名全部大写，单词间用下划线隔开，尽量使用全称，不要缩写

例如：CARD_OPERATE_RESULT

• 类名采用大驼峰方式
• 必须保证导入和导出名字一致
• 函数注释规范

/**

• @description: 千字符格式化，特殊情况当有日期时，最后一组数字不算入统计

• @param num {String} 需要格式化数字的value

• @params {Object} 具体操作

• @return {String} 千字符格式化后的数字

*/

• i18n文件key值：禁止用中文，禁止用中文，目前项目中存在使用中文的问题，要遵循js变量名的规则

css 规范

整体遵循BEM规范

• 所有实体的命名均使用小写字母，复合词使用连字符“-”连接
• Block与Element之间使用双下画线“__”连接。
• Modifier与Block/Element使用双连字符[15]“——”连接。
• modifier-name和modifier_value之间使用单下画线“_”连接。

示例：

• 块即模块，如搜索表单search-form，可以看做一个块
• 这个块内的按钮button、输入框input，为元素
• 元素可以有多种状态，如居中按钮，即修饰

<form class="search-form">

  <input class="search-form__input"/>              //元素

  <button class="search-form__button"></button>    //元素

  <button class="search-form__button--primary"></button>    //修饰

</form>

• 应尽量控制css嵌套层级不超过3层
• scss中函数命名参考js

路由规范

• 路由路径：小驼峰命名法

示例：/pay/payInfo

• 路径中不要出现参数字段

示例：/pay?userId=121 应该改为/pay/121

• name命名：大驼峰
• path:必须以'/'开头，即使为children下的子路由

四、开发规约

预发环境：统一合并到release 分支（目前没有预发）

生产环境：如果有预发环境，上图会直接由release分支直接合并到master，保证release和master代码统一（存疑、后续有了release分支确定），并且建立 tag ，方便快速回滚

tag命名

<tid>-<年月日>-<scope> 

示例：tid-20220519-login

分支命名

<type>-<tid>-<scope>-<开发人>

示例：feat-T0-icon-shirong

commit规范

<tid> <type>(<scope>): <subject>

示例：T0 feat(icon)：在首页菜单中增加金刚位上传功能

（1）tid：taskId

（2）type：提交 commit 的类型，包括以下几种

• feat: 新功能
• fix: 修复问题
• docs: 修改文档
• style: 修改代码格式，不影响代码逻辑
• refactor: 重构代码，理论上不影响现有功能
• perf: 提升性能
• test: 增加修改测试用例
• chore: 修改工具相关（包括但不限于文档、代码生成等）
• deps: 升级依赖
• merge: 合并冲突

（3）scope：修改文件的范围（包括但不限于 doc, middleware, proxy, core, config）

如果修改的为具体功能：则直接写views下的功能文件夹名称

（4）subject

描述具体修改内容

（5）例如：T0 fix(sendotp): 去掉官网相关进件等注册功能