前言
- 当我们创建好项目之后,会在
views
下面创建对应的文件夹,一般文件夹下的第一个文件都是index.vue
; - 但是当我们保存之后,就会有错误提示;
Component name "index" should always be multi-word
组件名 index 应该总是由多个单词组成;
- 虽然这个提示不影响我们代码的运行,但是爆红就很难受(我有强迫症😂),所以最好还是解决掉;
一、问题出现原因
- 这是由于我们没有按照
ESLint
所制定的组件命名规则引起的;- 按照
ESLint
的规则:- 组件名称必须是多个单词组成的,除根组件
App.vue
外 (避免现有的以及未来的HTML元素冲突); - 单文件组件的文件名要么是单词大写开头 (
PascalCase
✅),要么是横线连接 (kebab-case
❌);
- 组件名称必须是多个单词组成的,除根组件
- 按照
- 知道了问题出现的原因,下面就来看看解决方案吧;
二、解决方法
2.1 ✅ 修改ESLint对于组件名称规则
-
不管是
Vue2
还是Vue3
的项目,我们创建好项目之后,项目根目录 下都会有.eslintrc.js
这个文件; -
这个文件里面保存的就是
ESLint
的相关配置(如果没有该文件,可以自己手动创建一个); -
在文件中添加以下代码:
jsmodule.exports = { // 其他配置 ..., rules: { // 如果组件名称为 index,ESLint 就会忽略此次组件名称的检查 'vue/multi-word-component-names': [ 'warn', { // 指定需要忽略的组件名称 ignores: ['index'] } ] }, // 其他配置 ... };
-
添加完毕,保存即可;
-
- 解释:
- 该规则用于检查Vue组件的名称是否符合要求;
- 具体来说:
- 该规则会检查组件名称是否有多个单词组成,并且是否符合一定的命名规范;
- 如果组件名称不符合要求,该规则会发出警告;
- 此外,该规则还提供了一个选项,用于指定一个数组,其中包含一些可以忽略的组件名称,这些组件名称将不会被检查,即使他们不符合命名规范;
2.2 ❌ Vue2项目
-
在项目的根目录里面找到
vue.config.js
文件,如果没有就自己创建一个; -
在该文件中添加如下代码:
jsmodule.exports = { // 其他配置 ..., // 关闭ESLint校验 lintOnSave: false, // 其他配置 ... };
-
保存后重新编译即可;
2.3 ❌ 完全按照ESLint规则
- 将组件名称全部使用多单词表示;