Vue2 组件名没有按照驼峰命名报错解决方法

原创已于 2024-01-31 11:38:17 修改 · 769 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #开发语言

于 2024-01-30 16:07:21 首次发布

Vue 专栏收录该内容

42 篇文章

订阅专栏

本文介绍了在Vue项目中遇到index这类单词组件名称不符合ESLint规范时，如何通过在代码中添加注释临时禁用规则以及在vue.config.js中配置长期关闭eslint校验的两种解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

报错信息：

ERROR in [eslint]
C:\Users\Administrator\Desktop\pj\vue-project\src\views\home\index.vue
1:1 error Component name "index" should always be multi-word vue/multi-word-component-names

如果想忽略这个错误，正常运行：

1、第一个方法

可以在代码中使用注释来告诉ESLint忽略某一行或某一段代码。

在你的Vue组件文件中，可以通过在不符合规范的代码行上方添加注释来禁用eslint规则，例如：

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <!-- 组件内容 -->
</template>

<script>
export default {
  name: 'index',
  // 组件逻辑
}
</script>

<style scoped>
/* 样式 */
</style>

这会告诉ESLint在这个组件文件中禁用 vue/multi-word-component-names 这个规则。请注意，这样做会在整个文件中禁用该规则，因此请确保只在必要的地方使用。最好的方式还是在可能的情况下，遵循规范来编写组件名。

2、第二个方法

在vue.config.js中如下配置：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave:false  //关闭eslint校验
})