前端开发小技巧 - 解决组件必须多单词问题(Component name "index" should always be multi-word)

前言

  • 当我们创建好项目之后,会在 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 的相关配置(如果没有该文件,可以自己手动创建一个);

  • 在文件中添加以下代码:

    js 复制代码
    module.exports = {
        // 其他配置
        ...,
        
        rules: {
            // 如果组件名称为 index,ESLint 就会忽略此次组件名称的检查
            'vue/multi-word-component-names': [
                'warn',
                {
                    // 指定需要忽略的组件名称
                    ignores: ['index']
                }
            ]
        },
        
        // 其他配置
        ...
    };
  • 添加完毕,保存即可;

    • 解释
    • 该规则用于检查Vue组件的名称是否符合要求;
    • 具体来说:
      • 该规则会检查组件名称是否有多个单词组成,并且是否符合一定的命名规范;
      • 如果组件名称不符合要求,该规则会发出警告;
      • 此外,该规则还提供了一个选项,用于指定一个数组,其中包含一些可以忽略的组件名称,这些组件名称将不会被检查,即使他们不符合命名规范;

2.2 ❌ Vue2项目

  • 在项目的根目录里面找到vue.config.js文件,如果没有就自己创建一个;

  • 在该文件中添加如下代码:

    js 复制代码
    module.exports = {
        // 其他配置
        ...,
        
        // 关闭ESLint校验
        lintOnSave: false,
        
        // 其他配置
        ...
    };
  • 保存后重新编译即可;

2.3 ❌ 完全按照ESLint规则

  • 将组件名称全部使用多单词表示;
相关推荐
你挚爱的强哥28 分钟前
✅✅✅【Vue.js】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本
javascript·vue.js·jquery
y先森1 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy1 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189111 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿2 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡3 小时前
commitlint校验git提交信息
前端
天天进步20153 小时前
Vue+Springboot用Websocket实现协同编辑
vue.js·spring boot·websocket
虾球xz4 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇4 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒4 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript