平凡之路

# 代码规范

# 前端项目src目录

.
├── api              -- ajax（axios）网络请求
├── assets           -- 静态图片、css、js 资源文件
├── components       -- 通用封装组件
├── config           -- 配置文件
├── constants        -- 常量配置文件夹
│ ├── dicts          -- 字典值
│ └── inject-keys    -- 存储 inject 的 symbol 的 key
├── docs             -- 文档
│ ├── .vuepress      
│ ├── ...
│ └── components     -- 通用组件 
├── directives       -- Vue2.0+ 中的通用指令
├── filters          -- Vue2.0+ 中通用过滤器
├── hooks            -- Vue2.7+ 通用 hooks 函数
├── mixins           -- Vue2.0+ 通用 mixins 混入文件
├── router           -- 路由文件
├── store            -- vuex 或者 pinia
├── styles           -- 样式
├── types            -- typescript 的接口或者 type 文件
├── mock             -- 模拟数据（可选）
├── jest             -- 测试文件 *-spec.js（可选）
├── utils            -- 工具类
└── pages            -- 前端页面

# Html、Css、Js

  • 文件名全部采用小写方式、以中线划分隔 正例：render-dom.js / index.html / common.css 反例：renderDom.js
  • HTML 属性使用双引号、JS 中字符串使用单引号
  • Css 命名规范
    • className 使用小写字母，使用kebab-case命名
    • id 采用PascalCase命名
    • scss与less中变量、函数、混入都采用PascalCase命名
    • id 与 className 可以使用 BEM 规则
    • css 中避免嵌套超过3层

# Vue

# 文件和组织结构

  1. 文件命名
  • 单文件组件：使用PascalCase命名 （例如: MyComponent.vue）
  • 其他文件：使用kebab-case命名 （例如: my-mixins.js）

  1. 代码风格

    1. 缩进: 使用两个空格进行缩进
    2. js代码中 字符串使用 单引号

  2. Vue 组件定义 name 属性。使用 PascalCase （例如: FormList）

# Vue2.0+组件属性按顺序

export default {
  name: 'MyComponent',
  functional: false, // 可省略
  inheritAttrs: false, // 可省略
  mixins: [],
  components: { /* ... */ },
  props: { /* ... */ },
  data() {
    return { /* ... */ }
  },
  computed: { /* ... */ },
  methods: { /* ... */ },
  // 生命周期函数
  watch: { /* ... */ },
  provide: { /* ... */ },
  inject: { /* ... */ },
  // 路由守卫钩子函数
  directives: { /* ... */ }, // 指令
  filters: { /* ... */ } // 过滤器
}

# Vue script 中 import 顺序

import { ref } from 'vue'
import { useHooks } from '@/hooks' // hooks
import mixins from '@/mixins' // 混入
import Component from '@/components' // 组件
import { utils } from '@/utils' // 工具 方法 字典
import type { interfaceType } from '@/types' // 类型
import Img from '@/assets/img' // 静态资源

const asyncComponent = () => import(/* ... */) // 异步组件

# 使用mixins时属性的命名

  • mixin 文件最好能对应功能
  • 需要暴露的属性命名 mix_[fileName]_[propName]。例如 mix_work_tableData。
export default {
  data() {
    return {
      mix_event_id: ''
    }
  },
  methods: {
    mix_event_getEventList() { /* dosomething... */ }
  }
}

# Git

# 分支命名规范

  1. master: 作为主分支
  2. develop: 作为测试分支
  3. feature: 作为新功能分支
  4. hotfix: 作为紧急漏洞修复分支

# commit-msg 规范

  1. feat[特性]: 新增feature
  2. fix[修复]: 修复bug
  3. docs[文档]: 仅仅修改了文档，比如README,CHANGELOG等等
  4. style[格式]: 仅仅修改了代码格式、缩进、空格 不改变代码逻辑
  5. refactor[重构]: 代码重构，没有加新功能或者bug
  6. perf[优化]: 优化相关，比如修改了更好的算法
  7. test[测试]: 测试用例，比如单元测试
  8. chore[工具]: 改变构建流程、或者增加依赖库、工具等
  9. revert[回滚]: 回滚到某一版本
  10. build[构建工具]: 新增或修改 sh、bat 等构建脚本
  11. config[修改配置]：修改配置文件 .env,.gitignore ...

# Typescript