Vue开发⼯具vuejs-devtools超级详细安装教程以及常见问题解决
这绝对是最详细的Vue开发⼯具vuejs-devtools安装教程，相信你只需要5分钟即可解决所有问题
⼀、vue.js插件下载
下载地址：；
点击进⼊Vue官⽹即可下载，共有两种版本的插件（开发版本：vue.js，⽣产版本：vue.main.js），建议使⽤开发版本。开发版本有更多的错误信息提⽰和调试，⽂件较⼤，⽣产办⽂件⼩但是很多提⽰不全，解决开发中遇到的bug不是很⽅便。
⼆、Vue开发⼯具vuejs-devtools下载
官⽹下载：；
官⽹下载是跳转到github中下载，建议下载master分⽀中的版本，这个是最终获得认可的版本，开发分⽀dev中虽然是最新版本但是不是最终版本。此处默认已经选择了开发分⽀直接下载即可），并且官⽹下载后你需要通过npm安装⼀些依赖后才能导⼊⾕歌浏览器中使⽤（后续会出教程，建议直接使⽤我准备好的，毕竟亲测可⽤）。
三、Vue开发⼯具vuejs-devtools安装+使⽤
将好男⼈提供的vuejs-devtools解压后导⼊⾕歌浏览器即可使⽤。如果是⾃⼰下载的前提需要配置manifest.json⽂件。右击打开manifest.json⽂件(记事本格式或者其他能打开的软件都⾏)到persistent 将状态改成true(默认false）—好男⼈已经修改过了，你可以直接使⽤
根据下图打开⾕歌浏览器中的【拓展程序】：
勾选【开发者模式】——点击【加载已解压的拓展程序】——选择刚刚解压的vuejs-devtools插件整个⽂件夹导⼊即可。导⼊后即可看到⼀件导⼊的vuejs-devtools插件。
vuejs流程图插件
⽤⾕歌打开⽂件进⼊调试模式（按F12即可进⼊），即可在调试控制台看到vue页签。如下图：
四、常见问题解决
安装好插件后，打开⽂件并打开调试模式后没有vue页签，这可很常见，解决⽅法如下：
⽅法⼀：最常见的是我们引⼊vue插件时引⼊了⽣产版本（vue.main.js）也就是压缩后的版本，这个默认是关闭，需要在你的js⽂件中的创建vue前⾯写⼊：fig.devtools = true；即可（不是在vue.main.js写这句话）。
⽅法⼆：导⼊Vue插件是我们选择开发版本的插件（vue.js）这样就不存在上诉的问题了。
其他⽅法01：这些⽅法都是⽹上流传的，不过有⼈说有⽤，有⼈说没⽤，这个看⼤家了，我觉得按⽅法⼀与⽅法⼆即可解决⼤部分问题。在扩展程序中点击这个拓展程序的详细信息，开启允许访问⽂件⽹址和在⽆痕模式下启⽤两项后就可以了。
其他⽅法02：进⼊调试模式时按F5+F12（两个同时按即可），这个我解决有点扯淡了，但是有⼈反馈成功过。也就写⼀下吧

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。