参考网址:
     Vue.js风格指南:【 https://cn.vuejs.org/v2/style-guide/

A组:必要的

  1. 组件名应为多个单词,避免与HTML相冲突

  2. data必须是一个带返回值的函数

  3. prop定义应该尽量详细,包括类型等

  4. v-for必须配合key使用

  5. v-for和v-if永远不要在一个元素上

  6. 为组件样式设置作用域
    (1)当 style 标签有 scoped 属性时,它的 CSS 只作用于当前组件中的元素。无scoped为全局样式。
      https://vue-loader-v14.vuejs.org/zh-cn/features/scoped-css.html
    (2)CSS Module:当 style标签有 module,打开 CSS Modules 模式,生成的 CSS 对象将为组件注入一个名叫 $ style 的计算属性,你可以在你的模块中使用动态 class 绑定:class="$ style.red",还可以设置 module 属性来为它们定义注入后计算属性的名称,module=‘a’,$ a.red
      https://vue-loader-v14.vuejs.org/zh-cn/features/css-modules.html

  7. 自定义的私有属性使用 $_ 前缀。并附带一个命名空间

B组:强烈推荐

  1. 尽量把每个组件拆分成组件文件
  2. 单文件组件的文件名:所有单词全部大写/全部小写横线连接
  3. 基础组件:应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头,比如 Base、App 或 V。例如:BaseButton,AppTable
  4. 只应该拥有单个活跃实例的组件应该以 The 前缀命名,以示其唯一性。这类组件在每个页面只用一次,不接受任何prop,为应用定制。TheSidebar.vue
  5. 紧密耦合的组件名,和父组件紧密耦合的子组件应该以父组件名作为前缀命名。只在父组件的场景下有意义。例如:TodoList.vue;|- TodoListItem.vue;|- TodoListItemButton.vue
  6. 组件名应该以高级别的 (通常是一般化描述的) 单词开头,以描述性的修饰词结尾。SearchButtonClear
  7. JS中的组件名:PascalCase命名法,所有单词首字母全部大写,DOM模板HTML中采用kebab-case命名
  8. 组件名应该倾向于完整单词而不是缩写。
  9. 在声明 prop 的时候,其命名应该始终使用 camelCase,而在模板和 JSX 中应该始终使用 kebab-case。
  10. 多个特性的元素应该分多行撰写,每个特性一行。
  11. 组件模板应该只包含简单的表达式,复杂的表达式则应该重构为计算属性或方法。复杂表达式可以重构到计算属性computed:{ XXXX : function () {} },复杂的计算属性可以分割为简单的计算属性。多个XXX:function(){}
  12. 指令缩写:用 : 表示 v-bind: 和用 @ 表示 v-on:,要么都用要么都不用
Logo

前往低代码交流专区

更多推荐