Vue-Devtools使用和介绍

什么是Vue-Devtools？

    官方的说法是它允许你在一个更友好的界面中审查和调试 Vue 应用。在网上查了没有太明确的说法。说白了就是帮助前端开发vue的一个应用，在Components你可以更好的看到组件信息变量和方法，在vuex中你可以查看到state,mutations,actions, getters等。在Events中你能看到你的所有事件方法。下面我们来学习下怎么安装它。

---

安装：

    1. 在git中下载到本地 （***切记下载一定要记得是master环境的代码，默认克隆后进入的是dev环境，执行npm run build会报错，需要切换到master分支***）

git clone https://github.com/vuejs/vue-devtools

    2.  用vsCode打开文件，打开终端

npm install

npm run build

依赖包下载完后执行npm run build,编译打包成功后会在shells下生成chrome文件夹。此文件夹就是用来放入chrome的扩展程序。

    3.  放到扩展Chrome插件中，Chrome中打开选择更多工具>扩展程序   >打开开发者模式

点击加载已解压的扩展程序, 找到刚才生成的chrome文件夹，选择 vue-devtools > shells > chrome 放入, 安装成功

 Vue-Devtools使用：打开浏览器的调试工具，选择vue

希望可以帮到您