vue-devtools安装教程（简单易上手）

备注：在安装配置Vue-devtools过程中，很多博客上基本上都要求去github官网下载vue-devtools-dev压缩包。下载并解压该压缩文件后，便以管理员的方式打开命令行窗口，然后利用npm进行intsall（命令行：npm install），接下来输入npm install bulid。当然，利用这种方法有一个前提，便是要在此之前先安装好npm，要想安装npm，最便捷的方法是下载一个集成的node.js，而前提是要有一定的node基础。在通过上述办法来安装vue-devtools时，会出现许多错误，比如会缺少某些必要的文件或者依赖包，而为了处理这些问题，还费时费力，还会打击心态，最后还不一定能够配置成功（本人亲测有效）。对此，查询了大量的安装教程，终于成功安装了vue-devtools，特此，将本人的总结经验分享给大家，若有什么不足之处，可随时与博主进行交流讨论。

vue-devtools文件已上传博主主页文件，想要安装vue-devtools工具的朋友可点击博主主页文件进行下载。

1. vue-devtools解压
   点击下载vue-devtools安装工具包，下载vue-devtools文件之后，根据自己需要解压到指定盘符下，请记住你所解压的位置，我解压在D盘下。具体操作如下图所示：
   
   
2. 工具安装步骤
   打开谷歌浏览器，输入网址：chrome://extensions/ ，会进入到扩展程序页面，点击开发者模式，之后点击加载已解压的扩展程序。具体操作如下图所示：
   
   点击加载之后，找到之间解压的vue-devtools文件夹，选择chrome文件夹，点击选择之后，扩展程序便引入成功。具体的操作流程如下图所示：
   
   点击右上角的扩展程序，点击固定，便可看到vue-devtools工具标志，则证明vue-devtools工具安装成功。具体操作如下图所示：
   
   若当前页面的V标志为灰色，可重新换一个网页进行尝试，可以哔哩哔哩登录网页或者其他网页为例，若亮则vue-devtools工具安装成功。具体操作如下图所示：
   
   或者在利用Win+R快捷键，输入cmd,打开命令行之后，输入命令：vue ui，便会跳转到vue项目管理器，点击f12便可看到vue-devtools工具是否安装成功。具体操作如下图所示：
   
   
3. 遇到问题及解决办法
   若遇到Vue.js not detected这种情况，点击扩展程序中的管理扩展程序，点击扩展程序的详细信息，会进入到下一个页面，将允许访问文件网址打开即可，然后切换至另一个页面便可看到V标志变亮。表示vue-devtools工具成功安装。具体操作如下图片所示：