Vue-DevTools安装和使用

1、下载
在master分支下,下载Vue-DevTools安装包
https://github.com/vuejs/vue-devtools/tree/master


2、手动安装
2.1运行npm命令
解压后，剪切到项目堆文件夹里，(即有很多vue项目的大文件夹里,不一定是当前项目文件夹里,方便找到它，)
Git 进入到 vue-devtools 所在目录(鼠标右击选择Git Bash Here,出现git终端)，或cd vue-devtools
然后运行以下两个指令。
先运行 npm install 安装项目依赖（如果太卡或失败,推荐使用cnpm i或cnpm install 成功）
再运行 npm run build 进行编译生成
具体步骤：运行 npm install

没成功

换成推荐的

cnpm i

成功了

如果出现提示WARN node unsupported “node@v12.13.0” is incompatible with uglifyjs-webpack-plugin@1.3.0 › webpack@3.12.0 › watchpack@1.7.4 › watchpack-chokidar2@^2.0.0, expected node@<8.10.0 兼容的问题，先不用管它，
值得注意的是有的vue-devtools版本，在git运行cnpm i之后，会自动运行 npm run build 进行编译生成，不用我们自己手敲。
2.2浏览器添加扩展程序
浏览器打开扩展程序后，开启 【开发者模式】，点击【 加载已解压的扩展程序】 按钮

选择 vue-devtools > shells 目录下的 Chrome 文件夹，（新版在package文件夹里）
加载成功后，启用，然后点击左边的刷新按钮，浏览器右上角就会出现一个Vue的logo图标(绿色)

备胎方案1：如果不出现Vue.js devtools：
打开文件夹vue-devtools-master\shells\chrome，找到最下方的manifest.json文件，找到"background"节点，把"persistent"属性的值从false修改为true。

备胎方案2：如果不出现Vue.js devtools：
安装后，关闭浏览器，再重新打开。
就要在控制台(F12)里console把top改成Vuel.js devtools
浏览器右上角Vue的logo图标(绿色),点击钟表标志(Switch to Vuex) 看到数据，方便调试。


在src>App.vue添加data数据
就可以看到Vue-DevTools工具里的数据，
哇~真的是妙啊！
如果这篇博文对你有了帮助，就点个赞吧~ 收藏也行啊~