蒸汽统治

这些规则涵盖了面向蒸汽组件和应用的模板约束。组合API和 脚本级的蒸汽指导存在于类型和脚本规则。

vapor/no-vue-lifecycle-events

报告每个元素的生命周期事件，如@vue:mounted。

默认严重程度：error 预设：happy-path，nuxt，opinionated

缺点：

<template>
  <input @vue:mounted="focusInput" />
</template>

好：

<script setup lang="ts" vapor>
const input = useTemplateRef<HTMLInputElement>("input");

onMounted(() => {
  input.value?.focus();
});
</script>

<template>
  <input ref="input" />
</template>

vapor/require-vapor-attribute

建议在预设预期为蒸汽兼容组件时，给<script setup>添加vapor。

默认严重程度：warning 预设：nuxt，opinionated

缺点：

<script setup lang="ts">
const count = ref(0);
</script>

好：

<script setup lang="ts" vapor>
const count = ref(0);
</script>

vapor/no-inline-template

报告已废弃inline-template属性。

默认严重程度：error 预设：nuxt，opinionated

缺点：

<template>
  <LegacyCard inline-template>
    <p>Profile</p>
  </LegacyCard>
</template>

好：

<template>
  <LegacyCard>
    <template #default>
      <p>Profile</p>
    </template>
  </LegacyCard>
</template>

vapor/prefer-static-class

报告动态:class绑定，其值为静态字符串文字。

默认严重程度：warning 预设：nuxt，opinionated

缺点：

<template>
  <section :class="'panel panel-primary'">Profile</section>
</template>

好：

<template>
  <section class="panel panel-primary">Profile</section>
</template>