Roshi-ERP 前端编程规约——Vue组件 #

通用 #

• [强制] 变量以lowerCamelCase方式命名
• [强制] 任何定义不允许覆盖保留字
• [强制] 禁止变量、方法、计算属性、props等的重复命名
• [推荐] 除_this之外，避免以_与$作为非全局性变量与方法的开头或结尾
• [推荐] 使用===，避免使用==

Template部分 #

通用 #

• [强制] 在兄弟元素（同级元素）中，key的取值必须唯一

  vue

  /* ✓ GOOD */
  <div key="1"></div>
  <div key="2"></div>
  

  vue

  /* ✗ BAD */
  <div key="1"></div>
  <div key="1"></div>
  

• [强制] 禁止使用静态的行内样式

  vue

  <template>
    <!-- ✓ GOOD -->
    <div :style="styleObject"></div>
    <div :style="{ backgroundImage: 'url('+img+')' }"></div>
  
    <!-- ✗ BAD -->
    <div style="color: pink;"></div>
    <div :style="{ color: 'pink' }"></div>
    <div :style="[ { color: 'pink' }, { 'font-size': '85%' } ]"></div>
    <div :style="{ backgroundImage, color: 'pink' }"></div>
  </template>
  

• [强制] 同一组v-if与v-else-if彼此间的条件不可重复

• [强制]v-if与v-for禁止在同一标签上使用

• [强制]v-for需要指定key属性

Vue2 #

• [强制] template标签上不允许添加key属性

Vue3 #

• [强制] 使用v-for时，key属性应指定在template标签上
• [强制] 在使用v-if与v-else时，如果在一个分支上指定了key，那么其余分支也要手动指定key值，指定则全部指定

Script部分 #

空格及风格 #

• [强制] 大括号风格 推荐使用 One True Brace Style

  javascript

  /* ✓ GOOD */
  if (foo) {
    bar()
  } else {
    baz()
  }
  
  /* ✗ BAD */
  if (foo) {
    bar()
  }
  
  else {
    baz()
  }
  

• [强制] 空格 等号前后各一个空格，逗号后接一个空格

  javascript

  /* ✓ GOOD */
  var foo = 1, bar = 2
  
  /* ✗ BAD */
  var foo = 1,bar = 2
  var foo = 1 , bar = 2
  var foo = 1 ,bar = 2
  

  对象字面量的冒号和值之间存在一个空格

  javascript

  /* ✓ GOOD */
  var obj = { 'foo': 'haha' }
  
  /* ✗ BAD */
  var obj = { 'foo' : 'haha' }
  

  在操作符前后添加空格

  javascript

  /* ✓ GOOD */
  var sum = 1 + 2
  
  /* ✗ BAD */
  var sum = 1+2
  

• [推荐] 注释 功能复杂（暂定函数体5行以上）的函数、计算属性、监听器等需要添加注释，注释格式参照文档《前端编程规约——注释规范》

选项顺序 #

[强制] 选项顺序配置如下

"vue/order-in-components": ["error", {
  "order": [
    "name",
    "model",
    "components",
    ["directives", "filters"],
    ["props", "propsData"],
    ["provide", "inject"],
    "emits",
    "functional",
    "mixins",
    "data",
    "computed",
    "watch",
    "watchQuery",
    "beforeCreate",
    "setup",
    "created",
    "beforeMount",
    "mounted",
    "activated",
    "deactivated",
    "beforeUpdate",
    "updated",
    "beforeUnmount",
    "unmounted",
    "errorCaptured",
    "renderTracked",
    "renderTriggered",
    "methods",
    ["template", "render"],
    "renderError"
  ]
}]

Name #

• [强制] 组件name使用UpperCamelCase方式命名
• [强制] 组件name的取值必须唯一
• [推荐] 组建的name应由复数单词组成

Props #

• [强制] props在组件内定义时使用lowerCamelCase方式命名
• [强制] 每个prop必须有default值
• [推荐] 在Vue2中，自定义v-model绑定的prop优先命名为value，Vue3中优先命名为modelValue

Data #

• [强制] data以函数的形式存在

Watch #

• [强制] 在选项式风格中，watch的handler不允许使用箭头函数

Computed #

• [强制] 禁止在computed内使用异步方法

Setup #

• [强制] 在setup选项中禁止使用export（包括script setup语法糖）

• [强制] 在setup的参数中禁止使用解构赋值

  javascript

  <script>
  export default {
   /* ✓ GOOD */
   setup(props) {
   }
  }
  </script>
  
  <script>
  export default {
   /* ✗ BAD */
   setup({ count }) {
   }
  }
  </script>
  

CSS部分 #

风格 #

• [强制] 左括号与类名之间一个空格，冒号与属性值之间一个空格；逗号分隔的取值，逗号之后一个空格

  CSS

  // ✓ GOOD
  .jdc {
    width: 100%;
    box-shadow: 1px 1px 1px #333, 2px 2px 2px #ccc;
  }
  
  // ✗ BAD
  .jdc{
    width:100%;
    box-shadow: 1px 1px 1px #333,2px 2px 2px #ccc;
  }
  

• [强制] 不要为 0 指明单位

  css

  // ✓ GOOD
  .jdc {
    margin: 0 10px;
  }
  
  // ✗ BAD
  .jdc {
    margin: 0px 10px;
  }
  

• 属性书写顺序

  1. [强制] 布局定位属性：display / position / float / clear / visibility / overflow
  2. [强制] 自身属性：width / height / margin / padding / border / background
  3. [强制] 文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
  4. [强制] 其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background: linear-gradient …
  css

  .jdc {
    position: relative;
    left: 0;
    float: left;
    display: block;
    width: 100px;
    height: 100px;
    margin: 0 10px;
    padding: 20px 0;
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    color: #333;
    background: rgba(0,0,0,.5);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
  }
  

• CSS浏览器私有前缀 [推荐] CSS3 浏览器私有前缀在前，标准前缀在后

  css

  .jdc {
    -webkit-border-radius: 10px;
    border-radius: 10px;
  }
  

• [强制] class及id命名 id及className均使用kebab-case命名，id的命名必须唯一；一切选择器命名时须有确切语义，建议按照模块使用前缀；禁止使用令人困惑的缩写，某些固化的缩写除外，如**.nav**、.btn

• [推荐] 慎用position与float，这两种属性会使元素脱离文档流的管理，可能带来不必要的额外工作

布局 #

• [推荐] 在对页面整体进行布局时，优先使用H5语义化标签以清晰结构，对于重复的、功能复用性较强的模块，尽量封装为局部组件
• [强制] 无论何种页面，均需要考虑适配问题，包括屏幕窗口大小适配与浏览器兼容性适配
• [推荐] 列表布局慎用float，优先使用inline-block、flex等方式，在不脱离文档流的前提下完成布局
• [推荐] 若有多个模块/子模块同时引用同一Css文件，依照其使用频率将其向上提升一个或多个层级，或放置于全局style文件夹下，在使用频率极高的情况下，可全局引用