Vue-Devtools简介：

Chrome 开发者工具，是一套内置于Google Chrome中的vue开发和调试工具，可用来对网站进行调试和分析。

安装方式一：

1. chrome插件商店直接安装（但因为是外网，国内几乎无法访问，需科学上网）

安装方式二：

1. 在官方的github上下载压缩包：github.com/vuejs/devto…
2. 解压缩后通过cmd进入devtools-main目录，npm install命令安装相关依赖包
3. 安装成功后继续执行npm run build命令，等待编译源程序完成
4. 安装完成后文件下会多了一些文件，修改shells目录下的mainifest.json 中的persistant属性为true（默认为false,可用记事本编辑并保存）
5. 打开Chrome浏览器设置-->更多工具-->扩展程序，并勾选开发者模式
6. 将刚刚编译后工程中的shells目录下，chrome的整个文件夹直接拖拽到当前浏览器中，选择启用，即可将插件安装到浏览器

安装方式三（推荐）：

以上方法实现过程中皆可能遇到一些问题，故推荐使用第三方插件网站（Extfans）安装

1. 通过Extfans第三方插件网站下载压缩包Vue-Devtools

2. 点击下载后关注其公众号，输入验证码（唯一缺点）即可下载压缩包；解压后得到如下文件vuejs-devtools.crx

3. 打开Chrome的扩展程序-->开发者模式开启-->将文件直接拖入Chrome的扩展程序中-->确认添加

4. 添加Vue.js devtools成功如下图所示，现其版本为6.1.4

5.点击详情，确保'允许访问文件网址'开启

6.将插件固定到浏览器右上角顶部，完成！

安装后效果如下:

运行vue相关项目-->F12启动开发者工具-->Vue