vue3.x:报错清单及解决记录
更新时间：2023年07月05日 14:54:45 作者：黑萝卜不黑
这篇文章主要为大家介绍了vue3.x:报错清单及解决记录详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
报错提示
component name “index“ should always be multi-word
在组件命名的时候不够规范，根据官方风格指南，除了根组件（App.vue）外，自定义组件名称应该由多单词组成，防止和html标签冲突。vue-cli创建的项目使用了最新的vue/cli-plugin-eslint插件，在vue/cli-plugin-eslint v7.20.0版本之后就引用了vue/multi-word-component-names规则，所以在编译的时候判定此次错误。
解决方式
1. 修改文件名称
修改组件名为多个单词，使用大驼峰或是小驼峰命名规则。
2. 关闭eslint校验
在根目录下找到vue.config.js文件（如果没有则新建一个），添加下面的代码：
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
// 添加此行代码
lintOnSave:false
})
3. 关闭命名规则校验
在根目录下找到 .eslintrc.js 文件，同样如果没有则新建一个（注意文件前有个点），添加下面的代码：
"vue/multi-word-component-names":"off",
示例
module.exports = {
root: true,
env: {
node: true
},
'extends': [
'plugin:vue/essential',
'eslint:recommended'
],
parserOptions: {
parser: '@babel/eslint-parser'
},
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",
},
overrides: [
{
files: [
'**/__tests__/*.{j,t}s?(x)',
'**/tests/unit/**/*.spec.{j,t}s?(x)'
],
env: {
jest: true
}
}
]
}
4. 官方建议忽略个别组件名
module.exports = {
root: true,
env: {
node: true
},
'extends': [
'plugin:vue/essential',
'eslint:recommended'
],
parserOptions: {
parser: '@babel/eslint-parser'
},
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": ["error",{
// 需要忽略的组件名
"ignores": ["index"]
}]
},
overrides: [
{
files: [
'**/__tests__/*.{j,t}s?(x)',
'**/tests/unit/**/*.spec.{j,t}s?(x)'
],
env: {
jest: true
}
}
]
}以上就是vue3.x:报错清单及解决记录的详细内容，更多关于vue3.x报错解决的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了web项目开发中VUE的混入与继承原理，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2021-09-09
这篇文章主要介绍了element upload 钩子函数的坑及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了Vue中的动态路由匹配路由问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
这篇文章主要介绍了Vue中使用h5 Plus的实现方法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
今天小编就为大家分享一篇vue点击自增和求和的实例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要介绍了Vue3.x中使用element-plus的各种方式详解，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要为大家详细介绍了Vue2.0实现自适应分辨率，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
这篇文章主要为大家介绍了详解el Cascader懒加载数据回显示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
vue vantUI实现文件（图片、文档、视频、音频）上传（多文件）
这篇文章主要介绍了vue vantUI实现文件（图片、文档、视频、音频）上传（多文件），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
这篇文章主要介绍了Vue 组件封装 并使用 NPM 发布的教程,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-09-09
最新评论