vue----devtools安装教程

网上看了很多教程，但是大多都有问题，上下文矛盾的那种，这一篇是我安装完成后写的。

一、准备工具

在安装dectools之前我们需要先安装node.js ，准确来说是工具npm。这一步大家自行查找，网上的内容都比较全面。

二、下载devtools工具安装包

github的下载地址:https://github.com/vuejs/vue-devtools
这个就是官方的下载地址，大家可以放心下载。

下载好后解压到本地文件夹，记得务必解压。
打开cmd窗口，从cmd中进入解压的vue-devtools-master文件夹
接下来有两个选择：

①直接输入指令npm install安装依赖包。
但是通常npm都会因为时间过长而报错，因此我们可以选择先安装国内镜。

②输入以下指令安装国内镜像文件：
npm install -g cnpm --registry=https://registry.npm.taobao.org
结束后输入cnpm -v检查版本确认是否安装成功，这一步也结束后输入指令：
cnpm install安装依赖包。

出现这样的界面我们可以进入下一步。
输入指令npm run build

到这我们的依赖包就安装完成了，接下来主要就是将插件导入谷歌浏览器了。

三、配置谷歌浏览器

进入vue-devtools-master->shells->chrome，配置manifest.json文件。

右击打开manifest.json文件(记事本格式或者其他能打开的软件都行)找到persistent 将状态改成true(默认false）

然后打开chrome浏览器将它添加到拓展程序中。
打开谷歌浏览器设置****——>扩展程序

打开右上角开发者模式

点击加载已解压的扩展程序
进入vue-devtools-master->shells->chrome，选择chrome文件夹。

最后在浏览器右上角看到vue图标代表完成。

安装过程中有任何问题都可以评论区留言或私信我，看到后一定尽力帮忙解答。