在使用vue-cli创建项目,命名好组件的时候,报错: error Component name “xxx” should always be multi-word,解决办法看最后
原因是官方的建议为除了App.vue组件外,自定义组件名称应该由多单词,最好是驼峰命名组成,而我们使用了单个单词命名。使用vue-cli创建的项目会在编译时指出这次错误。
我网上找了但没有解决的办法
1.在根目录下设置了一个文件vue.config.js,在里面配置lintOnSave: false
添加后的文件为:
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
//关闭eslint校验
lintOnSave: false
})
2.我在根目录下添加了.eslintrc.js文件,添加了如下代码
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
}
}
]
}
最后解决的办法
最后我在根目录下的package.json文件里找到了eslintConfig,在里面添加了配置
"rules": {
"vue/multi-word-component-names":"off"
}
最后添加好的示意文件如下(找package.json文件——》eslintConfig配置——》添加rules配置——》最后重启项目就好了)
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "@babel/eslint-parser"
},
"rules": {
"vue/multi-word-component-names":"off"
}
},