为什么要用到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!
