Vue Dev Tools安装

如果cnpm没有安装则通过以下方式进行安装

node版本在6.0以上

将cnpm的安装路径添加到系统环境变量

然后在命令提示符中输入cnpm -v,如果显示版本号则表明安装成功

cnpm安装成功，则可以直接安装vue devtool

Github下载地址：GitHub - vuejs/devtools at v5.1.1

cd到vue devtool的下载解压目录，然后用cnpm install安装

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

编辑manifest.json文件，修改persistent为true。使其在浏览器重新加载时保持激活状态

路径要改成根据实际情况生成的目录，我生成的目录都在src下，不是在build下

打开chrome浏览器，输入chrome://extentions/进入扩展程序，打开开发者工具

点击 “加载已解压的扩展程序” 并选择刚才的 shells/chrome 目录

加载成功

但是通过这种方式安装的vue图标不亮，不能使用。

第二种方法可以：

进入极简主义主页：极简插件_Chrome扩展插件商店_优质crx应用下载 (zzzmh.cn)

搜索devtools：Vue.js Devtools_6.5.1_chrome扩展插件下载_极简插件 (zzzmh.cn)

下载后解压，然后将解压后的crx文件直接加入到chrome的扩展程序中直接安装

安装完后将所有的开关打开

重启chrome后再看vue devtools图标变亮

打开开发者工具可以看到vue页签，在这个页签中可以进行调试