代码中的命名严禁使用拼音或中英混合的方式

对比命名风格

• 驼峰命名形式方便引用

• 中划线展示更直观

  推荐一款IDE插件CamelCase，可以方便的进行驼峰和横线命名的互转。

项目命名

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

    // bad
    mall_management-system / mallManagementSystem / MallManagementSystem


    // good
    mall-management-system

普通文件

普通文件和文件夹全部采用 小驼峰 形式，用于区分原生组件，使用两个单词以上命名，局部的组件文件，使用组件的类型前缀开头，例如：dialogUser、formUser、cardUser等等，以提高辨识度。

    // bad
    script / demo_scripts / demo-scripts

    // good
    scripts / demoScripts

公共组件

公共组件应采用 大驼峰 （用于和普通文件做区分），第三方公共组件保持原样即可。

变量、方法名

变量，方法名、参数名等等统一使用 小驼峰 风格。

    // bad
    local_value / input-use-id

    // good
    localValue / getHttpMessage() / inputUserId

事件

事件同方法名使用 小驼峰 风格，并且以on开头，放在methods中的最后,用于区分方法与事件，快速定位。

    <!-- bad -->
    <template>
      <input v-model="value" type="text" @input="input">
    </template>
    <script>
      export default {
          data() {
            return {
              value: '',
            }
          },
          methods: {
              // bad
              input() {
                  
              },
              setForm(){
                  
              },
          }
      }
    </script>
    
    <!-- good -->
    <template>
      <input v-model="value" type="text" @input="onInput">
    </template>
    <script>
      export default {
        data() {
          return {
            value: '',
          }
        },
        methods: {
          setForm(){
    
          },
          // good
          onInput() {

          },
        }
      }
    </script>

css类命名

统一使用 小写形式 命名，并采用 BEM 命名规范，Bem 是块（block）、元素（element）、修饰符（modifier）的简写，由 Yandex (opens new window) 团队提出的一种前端 CSS 命名方法论。 具体参考 (opens new window)

• 中划线 ：仅作为连字符使用，表示某个块或者某个子元素的多单词之间的连接记号。
• __ 双下划线：双下划线用来连接块和块的子元素
• --双中划线：双中划线用来描述一个块或者块的子元素的一种状态

  WARNING

  注意： 修饰符（modifier）使用--而不是_，这里我们以element-ui使用的方式为准。

    // bad
    .el-input .inner {}
    .el-input.success {}

    // good
    .el-input {}
    .el-input__inner {}
    .el-button--success {}
    .block__element--modifier {}