vue-cli 协助开发者查找vue组件

vue-cli-plugin-findfile 插件说明

在开发过程中随着项目不断变大 组件越来越多导致查找组件变得很麻烦 尤其是对于一个新人维护旧项目时就更费劲了 应对这个问题写了一个插件vue-cli-plugin-findfile 该插件可以在浏览器页面中直接双击跳转到配置的编辑器页面中 该插件只在开发环境且配置devServer后生效 如图：

当鼠标滑动到 某个组件时 会有 title 提示 当前组件所在路径 如图所示鼠标滑到 hello world 时 提示 组件位于 src/views/user.vue 文件 双击它 会直接打开对应编辑器的 user.vue 文件

默认支持 webstorm | vscode 两种编辑器

具体使用说明如下：

添加插件

vue add vue-cli-plugin-findfile

配置 (vue.config.js)

// vue.config.js
const config =  defineConfig({
  pluginOptions:{
    findFile:{
      main: './src/main.js', // 可选
      editor: 'vscode' // 可选
    }
  }
})

可以在 vue.config.js 中添加配置 如果没有配置 pluginOptions 则会采用默认值

• main: 指定入口文件 默认: 他会根据webpack entry 去判断
• editor: 指定编辑器 可选 vscode | webstorm 默认: vscode