Vue调试神器安装

上文中记录了如何搭建vue的开发环境，本文记录Vue提供的强大调试神器的安装流程！

1、插件下载链接：https://github.com/vuejs/vue-devtools/tree/master
如图，左面框选择或输入master，在点击右边 “克隆与下载” 下载插件

2、下载之后，解压文件，然后复制粘贴解压的文件，放在某个盘的某个文件夹下面。
3、通过Windows+R这个快捷键打开“运行”对话框，输入cmd，进入命令行。
4、在命令行内，进入到第2步中存放的文件夹下的vue-devtools-master目录下。
5、先执行npm install命令；（执行过程比较长，请耐心等待…）
6、执行成功后，再执行npm run build命令；（两个命令都执行成功，关闭命令行）
7、进入 第2步文件存放位置\vue-devtools-master\shells\chrome目录下，修改mainifest.json 文件中的persistent属性的值为true。

8、打开谷歌浏览器，设置开发者模式，添加扩展程序文件
开谷歌浏览器，设置开发者模式，添加扩展程序文件
打开谷歌浏览器 —— 点击右上角纵向排列的三个点选项 —— 更多工具 —— 右上角勾选开发者模式（有的已默认勾选了）—— 加载已解压的扩展程序 —— 找到本地磁盘中vue-devtools-master目录下的chrome文件夹 —— 选择该文件夹并点击确定按钮。

至此，恭喜vue devtools插件已经安装成功！！
注：Vue.js devtools插件在chrome浏览器安装成功后，在浏览器的右上角会存在一个插件图标。
9.启动vue devtools插件
打开vue项目,在控制台选择vue：

10、点击vue，查看数据

本文参考一下两篇文章，结合自己实际操作
原文：
https://blog.csdn.net/tel13259437538/article/details/79953744
http://www.javashuo.com/article/p-prboyxsy-by.html