为什么要用到vue-devtools调试工具

由于vue是数据驱动的，所以在开发调试的时候查看DOM结构并没有什么卵用。
所以需要借助vue-devtools插件，我们就可以查看数据结构进行解析和调试。

1.下载chrome扩展插件

GitHub下载地址：https://github.com/vuejs/vue-devtools

2.npm install 安装

cmd打开命令行，进入vue-devtools-master文件加，然后运行npm install命令安装工具，

进入插件目录.png image.png

我的这个有报错 ，但是有save操作，所以我还走下一步

如果网速不行可以转淘宝镜像，安装很快

npm install -g cnpm --registry=https://registry.npm.taobao.org

然后用cnpm install 安装

3.npm run build

安装完成之后，运行npm run build 来编译文件

image.png

4.添加至chrome游览器

游览器输入地址“chrome://extensions/”进入扩展程序页面，点击“加载已解压的扩展程序…”按钮，选择vue-devtools>shells下的chrome文件夹。（如果没有这个按钮，可能你需要打开开发模式功能）

image.png image.png image.png

因为我的chrome浏览器时第一个插件所以在左上角会有显示

image.png

我的可以喽，你的呢？加油学vue!