css相关
- 使用less
- 类名统一使用遵循 kebab-case(短横线分隔命名) 约定
- 分类区别
- 尽量减少使用calc函数，加速页面渲染
Js相关
-
页面统一采用小驼峰命名，首字母小写
-
组件也采用小驼峰命名，但首字母需大写
组件名应该始终是多个单词的，根组件 App 除外
有意义的名词、简短、具有可读性
命名遵循 PascalCase(单词首字母大写命名) 约定
-
公用组件以 CP (项目名缩写简称) 开头，如（CPDatePicker,AbcdTable）
-
页面内部组件以组件模块名简写为开头，Item 为结尾，如（StaffBenchToChargeItem，StaffBenchAppNotArrItem）
-
使用遵循 kebab-case(短横线分隔命名) 约定
在页面中使用组件需要前后闭合，并以短线分隔，如（
<abcd-date-picker></abcd-date-picker>，<abcd-table></abcd-table>）导入及注册组件时，遵循 PascalCase(单词首字母大写命名) 约定
同时还需要注意：必须符合自定义元素规范: 切勿使用保留字。
-
-
采用eslint-standard规范
-
提交需遵守commitlint规范
❯ feat: 🌟 一个新功能
fix: 🐛 一个 bug 修复
perf: 🚀 提升性能的代码更改
style: 🎨 对代码含义无影响的改动（空格，格式化，等，非 UI 变动）
docs: 📝 只有文档发生改变
test: 🔧 添加一些缺失的测试或者修正已存在的测试
refactor: 🔨 既不是修复 bug 也不是添加新功能的代码更改
|-- cp-web项目结构
|-- .editorconfig 编辑器规则
|-- .gitignore git忽视列表
|-- .gitlab-ci.yml gitlab-ci流水线
|-- CHANGELOG.md 变更文档
|-- README.md
|-- package.json
|-- vue.config.js
|-- config
| |-- nginx.conf nginx反向代理
|-- public
| |-- favicon.ico
| |-- index.html
| |-- loading.gif 加载动画
|-- src
|-- App.vue
|-- main.js
|-- mock.js
|-- api 请求封装在这里
|-- assets 静态资源（一般不用，存储在阿里云oss，cdn）
|-- components 通用组件 使用说明参考组件内
|-- router
| |-- index.js
|-- utils 通用工具函数
| |-- initJsBridge.js 初始化jsbridge
| |-- jsBridgeMethods.js jsbridge具体方法，在文件内查看使用说明
| |-- utils.js 通用工具函数
|-- views 页面
注释规范
- 公共组件使用说明
- 各组件中重要函数或者类说明
/**
* 函数描述
*
* @param {string} p1 参数1的说明
* @param {string} p2 参数2的说明，比较长
* 那就换行了.
* @param {number=} p3 参数3的说明（可选）
* @return {Object} 返回值描述
*/
function foo(p1, p2, p3) {
var p3 = p3 || 10;
return {
p1: p1,
p2: p2,
p3: p3
};
}
- 复杂的业务逻辑处理说明
- 特殊情况的代码处理说明,对于代码中特殊用途的变量、存在临界值、函数中使用的hack、使用了某种算法或思路等需要进行注释描述
- 注释块必须以/（至少两个星号）开头/；
- 单行注释使用//；
- 多重 if 判断语句
