Solve the error when running the vue project: The “xxxxxx” component has been registered but not used vueno-unused-components

Table of contents

problem background

When Vue2.0 or 3.0 project is selected eslint , when there are defined but unused components, or there are defined but unused variables, an error will be reported. .

error message

When npm run serve runs the vue project, an error occurs: The “HelloWorld” component has been registered but not used vueno-unused-components

Cause Analysis

That is, eslint the default rules lead to unnecessary error reporting, that is to say, this error is reported because the eslint code checks that you registered the component but did not use it, and then reported an error

Solution

Method 1: Modify eslintthe rules

◼️ Modify the vue projectpackage.json

package.json Find the rules under eslintConfig in , and add the following code :

"eslintConfig": {
  "rules": {
      "vue/no-unused-components": "off", // 当存在定义而未使用的组件时，关闭报错
      "no-unused-vars":"off" // 当存在定义而未使用的变量时，关闭报错
   }
}

◼️ Modify the vue project eslintrc.js

In eslintrc.js the file (if this file exists in the project), find the rules in the js module and add the following code:

rules: {
  'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
  'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
  "vue/no-unused-components": "off"
  "vue/no-unused-components": "off"
}

Either of these two types of files can be used. If both files are modified, eslintrc.js the priority of the file is higher.

Method 2: Do not use or close eslint

Option 1: Don’t use it eslint . Of course, you can not choose it when creating a project , but it is obviously introduced when you encounter this kind of problem . . eslinteslint
Solution 2: close eslint , vue.config.js add a line of configuration: lintOnSave: false .

References: After Vue creates a project, there is no webpack.config.js (vue.config.js) file solution