【插件工具】Vue.js is detected on this page. Open DevTools and look for the Vue panel报错及安装vue-detools

如果已经安装了vue-devtools可以不看这部分

先介绍三种安装vue-devtools的方法：
① 如果就可以直接去chrome商店下载该插件

② 非科学上网的小伙伴给你们准备vue-detools一分钟成功安装方法，这里的版本为5.1.0版本，如果需要最新的版本的话就去git下载看第③步骤
-------------------------------------------------5.1.0----------------------------------------
链接: https://pan.baidu.com/s/1i75Nwz-CRbnIJBr5qROvWA 提取码: 5w84
-------------------------------------------------------------------------------------------------
打开chrome浏览器 >>> 更多工具 >>> 扩展程序（打开开发者模式），然后直接下载将它拖到里面，就会提示你是否安装vue-devtools，有老旧版本的记得先卸载在安装，然后右上角就会出现该插件的图标啦，如果有vue项目就会亮起来；

③ 使用npm install的方法

1. 首先如果没有npm的小伙伴，先去 Node官网 下载nodejs，然后会一起下载npm，最好下载node@8+版本
2. 然后去github下载vue-devtools（github下载地址：https://github.com/vuejs/vue-devtools）解压ZIP到桌面
3. 可以直接使用window里的命令行进入vue-devtools文件安装依赖及打包，也可以把该文件拖入到vscode或者webStorm中，打开终端执行npm install安装它的依赖也就是node_modules里面的插件，如果中途卡住了或者下载太慢，可以 淘宝NPM镜像执行以下 $ npm install -g cnpm --registry=https://registry.npm.taobao.org
4. install完成之后再npm run build，完成之后进入C:\Software\vue-devtools-master\shells\chrome目录下，修改mainifest.json 文件中的persistent属性的值为true。（根据自己安装的目录去找mainifest.json 文件）
5. 打开谷歌浏览器 —— 更多工具 ——扩展程序—— 右上角勾选开发者模式（有的已默认勾选了）—— 加载已解压的扩展程序 —— 找到本地磁盘中vue-devtools-master目录下的chrome文件夹 —— 选择该文件夹并点击确定按钮

汇总一下不能用或者报错的原因及其解决方法

问题1：
装完Vue Devtools，想用来查看用vue.js写的页面，然而却发现图标灰色，无法使用，提示检测不到Vue.js

关于这个persistent参数可以参考大神总结的：
persistent为true时，在background字段中指出的js脚本将持续运行在后台，而若persistent为false，则这些脚本将只在事件活动时运行，事件不活动时就会释放其占有的内存等资源。

问题2：
如果图标亮但不能调试并且提示：
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项目中的main.js入口文件添加这段代码配置vue的环境，注意此时最好重新启动项目，再次打开浏览器，就可以解决上面的问题了：

Vue.config.devtools = true