安装Vuetify遇vue/multi-word-component-names错误及组件名重置问题

1. 仓库未提交更改提示 #

安装插件前CLI检测到git仓库有未提交更改时会弹出提示，若不想重复遇到该提示，可先提交本地更改：

git add .
git commit -m "提交本地更改"

已选择继续安装的话无需额外操作，不影响插件正常安装。

2. sass-loader版本冲突警告 #

Vuetify 2与sass-loader^{10.0.0兼容性更好，当前项目中存在}12.0.0版本导致冲突，可强制安装指定版本解决：

npm install sass-loader@^10.0.0 --save-dev

安装完成后重新运行项目，即可消除版本冲突警告，避免潜在构建错误。

3. 组件名被Vuetify重置为“Home”的问题 #

方案一：关闭ESLint多词组件名规则（无需修改组件名） #

在项目根目录的.eslintrc.js（或.eslintrc.json）中添加规则配置，关闭vue/multi-word-component-names检查：

module.exports = {
  // 其他配置...
  rules: {
    // 新增这条规则
    "vue/multi-word-component-names": "off"
  }
}

方案二：自定义组件名并避免被覆盖 #

1. 将HomeView.vue中的组件名修改为HomeView：

<script>
export default {
  name: 'HomeView'
}
</script>

2. 修改router/index.js中的路由配置，同步更新组件导入和路由名称：

import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/',
    name: 'homeView', // 同步修改路由名称（可选，但建议保持一致）
    component: HomeView
  }
]

3. 若需重新安装Vuetify，在安装过程中遇到是否覆盖现有文件的提示时，选择N（不覆盖），即可保留手动修改的组件名。

4. npm漏洞修复 #

按照提示执行命令修复漏洞：

npm audit fix

若存在无法自动修复的漏洞，可尝试强制修复（注意：强制修复可能导致依赖兼容问题，需谨慎操作）：

npm audit fix --force

也可通过npm audit查看漏洞详情，手动升级存在风险的依赖包版本。

内容的提问来源于stack exchange，提问作者Allan Michel