在google浏览器下安装vue-devtools扩展

一、下载vue-devtools，下载地址：https://github.com/vuejs/vue-devtools

二、解压到对应目录，例如: D:\软件\vue-devtools-dev

三、进入解压的目录中

1.执行命令：npm install      (需要静心等待一会)

2.执行命令：npm run build

3.修改配置文件，D:\软件\vue-devtools-dev\shells\chrome目录manifest.json文件里的"persistent":false改成true

4.打开扩展程序页面，然后点击"加载已解压的扩展程序 "，选择D:\软件\vue-devtools-dev\shells\chrome

5.在插件目录vue-devtools-dev下执行命令npm run dev，这样插件就会安装在浏览器中了。

打开localhost:8080可以看到插件已经安装并运行了

在vue项目页面下，按F12就可以看到vue面板

注：如果后期vue面板出不来，再到vue-devtools-dev文件夹下执行一遍npm run dev即可

ps :
如果图标亮但不能调试并且提示：
Vue.js is detected on this page. Devtools inspection is not available because it's in production mode or explicitly disabled by the author.
是因为你页面引用的vue是压缩版本的，默认会关闭调试，要引入vue.js。

另外种方法是在或者在代码的主文件中配置vue的环境：
Vue.config.devtools = true;
(该方法没有亲测)