vue 排错
error The template root requires exactly one element vue/no-multiple-template-root ...
解决办法:
.eslintrc.js 文件 extends 中的 ‘plugin:vue/essential’,改成’plugin:vue/vue3-essential’
error The "page" component has been registered but not used vue/no-unused-components
解决办法:
- 在script 中 导入要用的组件:import XXX from ‘./components/XXX.vue’
- 在 components 里注册该组件
- 在template中使用该组件
error Component name "index" should always be multi-word vue/multi-word-component-names
原因:
组件命名的时候不够规范,根据官方风格指南,除了根组件(App.vue)外,自定义组件名称应该由多单词组成,防止和html标签冲突。而最新的vue-cli创建的项目使用了最新的vue/cli-plugin-eslint插件,在vue/cli-plugin-eslint v7.20.0版本之后就引用了vue/multi-word-component-names规则,所以在编译的时候判定此次错误。
解决办法:
方案一
修改组件名为多个单词,使用大驼峰命名方式或者用“-”连接单词。但是有时候因为个别原因不能改名,此方案不好用。
方案二:
关闭校验
在根目录下找到vue.config.js文件(如果没有则新建一个),添加下面的代码
lintOnSave: false
添加后文件示例:
const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave:false //关闭eslint校验
});
方案三
在根目录下找到 .eslintrc.js 文件,同样如果没有则新建一个(注意文件前有个点),代码如下
添加一行:
"vue/multi-word-component-names":"off",
添加后文件示例:
module.exports={
root:true,
env:{
node:true
},
extends:[
'plugin:vue/vue3-essential'
],
parserOptions: {
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
//在rules中添加自定义规则
//关闭组件命名规则
"vue/multi-word-component-names":"off"
}
}