Vue开发工具之vuejs-devtools安装教程及常见问题解决(最详细)
作者：goog_man 发布时间：2024-05-10 14:09:33
这绝对是最详细的Vue开发工具vuejs-devtools安装教程，相信你只需要5分钟即可解决所有问题
vue-devtools是什么？
vue-devtools是一款基于chrome游览器的插件，用于调试vue应用，这可以极大地提高我们的调试效率。
一、vue.js插件下载
下载地址：vue.js插件下载；
点击进入Vue官网即可下载，共有两种版本的插件（开发版本：vue.js，生产版本：vue.main.js），建议使用开发版本。开发版本有更多的错误信息提示和调试，文件较大，生产办文件小但是很多提示不全，解决开发中遇到的bug不是很方便。
二、Vue开发工具vuejs-devtools下载
官网下载：Vue开发工具vuejs-devtools下载；
脚本之家下载：vue.js devtools插件下载
官网下载是跳转到github中下载，建议下载master分支中的版本，这个是最终获得认可的版本，开发分支dev中虽然是最新版本但是不是最终版本。此处默认已经选择了开发分支直接下载即可），并且官网下载后你需要通过npm安装一些依赖后才能导入谷歌浏览器中使用（后续会出教程，建议直接使用我准备好的，毕竟亲测可用）。
可以参考下我已经安装好的依赖包，您可以直接下载后解压导入到谷歌浏览器中使用。
三、Vue开发工具vuejs-devtools安装+使用
将好男人提供的vuejs-devtools解压后导入谷歌浏览器即可使用。如果是自己下载的前提需要配置manifest.json文件。右击打开manifest.json文件(记事本格式或者其他能打开的软件都行)找到persistent 将状态改成true(默认false）—好男人已经修改过了，你可以直接使用
根据下图打开谷歌浏览器中的【拓展程序】：
勾选【开发者模式】——点击【加载已解压的拓展程序】——选择刚刚解压的vuejs-devtools插件整个文件夹导入即可。导入后即可看到一件导入的vuejs-devtools插件。
用谷歌打开文件进入调试模式（按F12即可进入），即可在调试控制台看到vue页签。如下图：
四、常见问题解决
安装好插件后，打开文件并打开调试模式后没有vue页签，这可很常见，解决方法如下：
方法一：最常见的是我们引入vue插件时引入了生产版本（vue.main.js）也就是压缩后的版本，这个默认是关闭，需要在你的js文件中的创建vue前面写入：Vue.config.devtools = true;即可（不是在vue.main.js写这句话）。
方法二：导入Vue插件是我们选择开发版本的插件（vue.js）这样就不存在上诉的问题了。
其他方法01：这些方法都是网上流传的，不过有人说有用，有人说没用，这个看大家了，我觉得按方法一与方法二即可解决大部分问题。在扩展程序中点击这个拓展程序的详细信息，开启允许访问文件网址和在无痕模式下启用两项后就可以了。
其他方法02：进入调试模式时按F5+F12（两个同时按即可），这个我解决有点扯淡了，但是有人反馈成功过。也就写一下吧
来源：https://blog.csdn.net/goog_man/article/details/112556875
0
投稿猜你喜欢
- 1、开发环境运行项目python mange.py runserver 0.0.0.0:80002、使用gunicorn在生产环境部署Gun
本文为大家分享了opencv基于Haar人脸检测和眼睛检测的具体代码，供大家参考，具体内容如下在这里，我们将进行人脸检测。最初，该算法需要大- 前言：Python主要有三种数据类型：字典、列表、元组。其分别由花括号，中括号，小括号表示。如：字典：dic={'a':12
- 1.下载与安装Anaconda3首先去官网Anaconda下载网址下载Anaconda3，我安装的版本是Anaconda3 2019.03（
- 1、获取秒级时间戳与毫秒级时间戳、微秒级时间戳import timeimport datetimet = time.time()print
- 文章首先使用pycharm的 PyQt5 Designer 做一个简单的界面，然后引入所谓的“mvc框架”。一、设计登录界面下面开始第一个话
- select先说switch...case...switch...case... 很常用，且很好理解。其作用和if...else...一样。
- 0.背景在游戏的UI中，往往会出现这样的情况：在某个战斗副本中获得了某个道具A，那么当进入主界面的时候，你会看到你的背包UI上有个小红点（意
- golang的单引号转义如题，golang中有时候需要将一个字符串中的单引号再转义一次，比如在两个单引号之间包含一个含有单引号的字符串的情形
- CSV 是一种简单的数据格式，通常为电子表格软件所使用。 它主要是由一系列的表格行组成，每行中单元格之间使用逗号(CSV 是 逗号分隔数值(
- 最近用php进行文件目录信息读取，在网上弄到下面一段代码：//获取指定目录下的文件列表//$path 指定的目录，默认为当前目录//$ifc
- 被Scrapy自动添加的头部在没有任何配置的情况下，scrapy会对请求默认加上一些头部信息Scrapy会通过配置文件中的USER_AGEN
- 1. SeriesSeries 是一个类数组的数据结构，同时带有标签（lable）或者说索引（index）。1.1 下边生成一个最简单的Se
- 简介CountVectorizer官方文档。将一个文档集合向量化为为一个计数矩阵。如果不提供一个先验字典，不使用分析器做某种特征选择，那么特
- 知识点爬虫基本流程re正则表达式简单使用requestsjson数据解析方法视频数据保存开发环境Python 3.8Pycharm爬虫基本思
- 本文实例讲述了django框架使用模板。分享给大家供大家参考，具体如下：models.py：from django.db import mo
- 直接看下面例子my_ld = [lambda x:x*i for i in range(3)]my_list = [ld(2) for ld
- 本文主要介绍 SQLServerExpress2008不用第三方工具调试T-SQL语句，经过本文的介绍，用SQLSERVER2008 Man
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&
- 组合集总计： group by with rollup/cube grouping sets 子查询按执行方式分：标准子查询、关联子查询 标
