vue-devtool工具是对运用了vue的页面在浏览器中进行调试的一个工具，进行安装如下几个步骤：
1.在github官网中搜索 vue-devtool，然后进行下载压缩安装包，或者用git克隆。
2.下载完之后进行解压，用命令提示行进入到解压的文件夹。
3.执行命令 npm install ，或者用cnpm install 都可以，后者安装会更快些，前提是也的安装了cnpm.
4.安装完成之后执行npm run build
5.执行完之后打开 \shells\chrome\manifest.json文件，然后修改 persistent 为 true
6.浏览器中 更多工具-扩展程序，然后直接把chrome文件拖入到页面中即可，到这里基本上就安装完了。
更详细的安装教程可以参考这个：
当时还不能理解，怎么我安装完不能用么？是我没开启还是什么，后面才知道只有当前页面引用了vue.js 这个图标才会亮起来。然后找了个含有vue的网页打开，果然图标是正常的，但是我f12还是没看到列表上有vue 调试的那个框。又是各种查，有的说浏览器上vue-devtool 上的允许访问文件网址要选上
有的说重新打开浏览器，刷新然后f12才能看到，也有的说检查引用的是vue.js 还是引用的vue.min.js,通过筛选，觉得只有最后一个可以试试，但是因为第一次接触，还是菜鸟，还一直在想在哪检查是引用的vue.js还是vue.min.js,刚开始还以为是下载的包里是vue.min.js，但是翻了包也没见有这个文件，最后终于意识到你调试页面自然而然是看页面上使用的vue.min.js还是vue.js，然后自己简单写了一个例子，终于出现了调试面板。后面想想简直要被自己蠢哭了。。。。
通过查阅总结一下几个需要注意的地方：
1.重新打开浏览器
2.允许访问文件地址
3.修改persistent为true
4.页面要引用 vue.js
来源：https://www.cnblogs.com/97310ZT/p/10090439.html