vue-devtools是一款基于Chrome浏览器的插件，用来调试Vue应用，可以大大提高Vue项目开发效率。我以前安装过几十次，失败了几十次，很痛苦，是我时至今日都无法解决的两大bug之一（另一个bug是velocity.js的应用），直至今天才破了这个魔咒，为了能帮助到更多人，我决定记录下来。vue-devtools的安装有三种方法，第一种是通过谷歌应用商店进行安装，第二种是手动安装，第三种是直接下载使用网友分享出来的资源：

方法一：（通过谷歌应用商店进行安装，需要番强）

打开谷歌的更多工具--扩展程序，打开左上角的“主菜单”，点击下面的“打开Chrome网上应用店”，这个应用商店是需要番强的，一般同学是打不开的！

能打开的同学搜索Vue.js devtools，把第一个扩展程序添加至Chrome即可。

方法二：（手动安装，无需番强）

1、打开https://github.com/vuejs/vue-devtools

2、点击左上角那个“dev”按钮，选择master分支，这步很重要，dev分支是别人正在开发的，master分支永远是bug最少的稳定版本。

3、点击绿色的“Code”按钮，选择安装方式，可以通过git clone命令行的方式克隆，也可以通过下载包“Download ZIP”的方式，这里我使用下载包的方式，方便简单，下载到哪里都可以（建议路径不要太复杂，比如我直接安装在F盘，世界太纷扰，自在就好）。

4、解压到当前文件夹，在终端进入该文件夹（cd /F/vue-devtools-master），然后先后运行两条命令：

• npm install（安装依赖，运行成功后ls查看目录，里面会多出一个node_modules模块）
• npm run build（打包构建，打包成功应该和下面第二张图一样）

因为我之前就安装过了，并非首次安装，所以运行cnpm install是这个样子，首次安装依赖的话，安装成功会显示added 1136 packages from 721 contributors......包的数量是一千多，多多少少都正常，不必在意。

5、修改安装目录vue-devtools-master/shells/chrome下的manifest.json文件，将第31行的persistent参数由false改为true，如下图：

6、打开谷歌浏览器的扩展程序（更多工具-扩展程序），点击“加载已解压的扩展程序”，选择vue-devtools-master/shells下的chrome，单击chrome即可选中chrome，然后点击“选择文件夹”即可。至此，vue-devtools插件手动安装完成！

方法三：直接使用现成资源（最简单）

下载链接：https://download.csdn.net/download/weixin_43804496/13580669

下载压缩包，然后解压，打开谷歌浏览器的扩展程序（更多工具-扩展程序），点击“加载已解压的扩展程序”，选择你解压后的chrome文件夹，单击chrome即可选中chrome，然后点击“选择文件夹”即可（上面方法二最后一张图），无论是方法一还是方法二还是方法三，安装vue-devtools成功都会多出一个扩展程序，多出这个程序就说明你安装成功了，但是必须重启浏览器才能生效。如下图：

如果资源需要积分下载而你又没有积分又想要下载或者链接失效可以跟我说