调试vue的插件vue-devtools的安装

vue-devtools的github地址为：https://github.com/vuejs/vue-devtools，其官方说明为“Browser devtools extension for debugging Vue.js applications.”，即，调试vue.js应用的浏览器扩展插件。其安装步骤如下所述：

• 1. 从官方github地址下载vue-devtools。

    已安装git工具的可以在某一路径下打开git bash终端，如下图所示。然后输入：git clone https://github.com/vuejs/vue-devtools，然后回车等待下载完成。

• 2. 安装项目所需的npm包

进入vue-devtools文件夹下，在此文件夹下打开git bash终端，输入命令npm installs，即可安装项目所需的npm包，如下图所示：

• 3. 编译项目文件

安装完项目所需npm包后，输入命令npm run build ，即可编译项目文件，如下图所示：

• 4. 修改manifest.json文件

在我安装vue-devtools的路径下，通过vue-devtools/shells/chrome/manifest.json 找到 manifest.json 文件，打开并将"persistent":false 修改为 "persistent":true，如下图所示：

• 5. 添加至chrome浏览器

在chrome浏览器地址栏输入： chrome://extensions/打开扩展程序，以打开扩展程序页面，然后点击“加载已解压的扩展程序”按钮，并选择 vue-devtools > shells > chrome放入，打开就可以看到安装成功了，如下图所示：

 

此时，打开vue项目并在chrome浏览器中访问时，F12打开开发者工具后，就可以看到vue调试项目了，如下图所示：

 

至此，vue-devtools安装完成。