Roland.E
通用
Template部分
通用
Vue2
Vue3
Script部分
空格及风格
选项顺序
Name
Props
Data
Watch
Computed
Setup
CSS部分
风格
布局

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行以上）的函数、计算属性、监听器等需要添加注释，注释格式参照文档《前端编程规约——注释规范》

选项顺序

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

json
"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文件夹下，在使用频率极高的情况下，可全局引用