组件划分

  • 情况
    • App组件代码超过100行
    • 使用了vue-router
  • 原则：尽量保证单文件组件代码不超过100行

组件命名

  • 原则
    • 语义化
    • 由2~3个单词组成
    • 使用-分隔单词

组件事件命名

  • 原则
    • 同组件命名
    • 应以动词/名词结尾，例如upload-success

props

  • 尽量传递JS原始类型（String, Number, Boolean）和Function，避免传递对象

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <!-- 推荐 -->
    <range-slider
      :values="[10, 20]"
      :min="0"
      :max="100"
      :step="5"
      @on-slide="updateInputs"
      @on-end="updateResults">
    </range-slider>

    <!-- 避免 -->
    <range-slider :config="complexConfigObject"></range-slider>

  • 提供默认值，并使用type校验属性

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    export default {
        props: {
          id: {
            type: Number,
            default() { return 10; },
          },
          title: {
            type: String,
            default() { return ''; },
          },
          content: {
            type: String,
            default() { return ''; },
          },
        }
    }

组件结构化

  • 属性顺序：name,extends,props,data,computed,components,watch,methods,lifecycle methods

  • CSS使用BEM命名规范

    1
    2
    3
    4
    5
    6
    .list {
        .list__item {
            .list__item--active {
            }
        }
    }