vue-devtool工具是对运用了vue的页面在浏览器中进行调试的一个工具,进行安装如下几个步骤:
1.在github官网中搜索 vue-devtool,然后进行下载压缩安装包,或者用git克隆。
2.下载完之后进行解压,用命令提示行进入到解压的文件夹。
3.执行命令 npm install ,或者用cnpm install 都可以,后者安装会更快些,前提是也的安装了cnpm.
4.安装完成之后执行npm run build
5.执行完之后打开 shellschromemanifest.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