前端协作规范

基本命名规范

命名分类

• cameCase（小驼峰命名，如：userInfo）
• PascalCase（大驼峰命名，如：UserInfo）
• kebab-case（短横线连接，如：user-info）
• snake-case（下划线连接，如：user_info）

项目命名

全部采用小写方式， 以下划线分隔。 例：snake_case

目录命名

组件目录使用PascalCase，其他目录统一使用kebab-case风格

HTML命名

单数复数使用kebab-case风格

CSS命名

统一使用snake_case.css

vue规范

props 命名规范（驼峰及串联式）

HTML 属性名称对大小写不敏感，因此浏览器会将所有大写字符解释为小写字符。也就是说。当你在你 DOM 模板中书写 prop 时，你应当将驼峰式(camelCase)转写为等价的（连字符分割的）串联式(kebab-case)：

Vue.component('blog-post', {
  // 在 JavaScript 中使用驼峰式(camelCase)
  props: ['postTitle'],
  template: '<h3>{{ postTitle }}</h3>'
})

<!-- 在 HTML 中使用串联式(kebab-case) -->
<blog-post post-title="hello!"></blog-post>

参考 (opens new window)

怎么制定前端协作规范? (opens new window)、前端开发规范梳理 (opens new window)、肉联帮前端代码规范 (opens new window)