文章目录
一、引言
在做 Vue 项目的开发时，我们经常需要在页面上调试，若没有安装vue-devtools插件则肯能有以下报错。
Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtools
翻译：下载Vue Devtools扩展以获得更好的开发体验
初识vue.html代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>初识vue</title>
<!-- 引入vue-->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
</body>
</html>
vue.js就是官网下载的https://v2.cn.vuejs.org/v2/guide/installation.html
版本号：2.7.16
接下来介绍如何在浏览器扩展程序增加 vue_dev_tools 调试工具
二、下载相关插件
1.提供网盘下载地址：
https://pan.baidu.com/s/1aGWLhcwZP1SLjEmZvJmk_w?pwd=4zd5 提取码: 4zd5
里面包含 vue2、vue3 的插件
2.github官网下载
https://github.com/vuejs/vue-devtools
官网下载目前vue2的插件好像没了，可以在网上搜一下6.x版本及以下的都是给vue2用的，vue7.x版本及以上的是给vue3用的。
三、浏览器加载插件
1、进入浏览器的扩展程序管理页面
点击浏览器右上角的“更多”，找到“扩展程序”，点击“管理扩展程序”
或者，在浏览器地址栏输入以下命令，进入扩展程序管理中心（以谷歌浏览器内核为例）：
chrome://extensions
2、打开“开发者模式”
在右上角看到“开发者模式”，把它打开
3、把下载好的插件复制（拖拽）到浏览器中
根据自己开发的情况需要，可以把 vue2 或者 vue3 的插件复制（拖拽）到浏览器中
四、运行代码
测试过程中遇到一个问题，已经安装完vue-devtools插件后，我直接用浏览器打开html文件，但是发现提示还在。
解决方法
在VSCode中安装Live Server插件,然后在html文件中鼠标右键–》Open with Live Server打开。
打开后如下图所示，可以看到提示已经消失。
谷歌浏览器开发者工具中会增加Vue页卡。
