windows下载安装Vue开发者工具(VueDevtools)，同时支持vue2.0和vue3.0两个版本

拼搏现实的明天。 2023-09-23 12:52 129阅读 0赞

## 前言 ##

vue开发者工具可以帮助我们提高开发效率，如果不安装控制台老是现在这些东西，对我这种强迫症患者来说痛苦至极,下面我就介绍下我的安装步骤

![在这里插入图片描述][54849ee7f92c42318807486bb8d9b785.png]

## 下载安装 ##

首先进入vue官网找到如下位置

![在这里插入图片描述][cf80750db7364d609adc43494ea4625d.png]

然后就会进入github主页，这个地方有几个地方需要注意

1 我们要用的是谷歌，所以要下载谷歌浏览器使用的

2 我们要点击第一个(这个是vue2.0的)，如果点击后面的就是vue3.0的  
![在这里插入图片描述][c6c35887e8a74601bf63b88ac5bd92ef.png]  
![在这里插入图片描述][ea4de941ccae4858827c550f83c72764.png]  
但是我们国内访问谷歌应用商城比较困难  
![在这里插入图片描述][a055ee11145946c8bf063fe9f554615c.png]  
所以我们换种方式,通过其他路径下载vue.js.devtools

我这里采用极简插件 网址：https://chrome.zzzmh.cn/index\#/index

输入 vue.js.devtools并访问  
![在这里插入图片描述][3e87bd7799b04145b67bdf5d1bdcb005.png]

点击推荐下载  
![在这里插入图片描述][9f11b930992d4dcda604ed12d1bde3e5.png]  
下载到本地解压缩  
![在这里插入图片描述][202b56da999f4739a63dcce851097c3b.png]  
然后把这个文件移动到谷歌插件里面,前提是要开启开发者模式  
![在这里插入图片描述][87dbb1a333f04114a1dac668886fc3af.png]  
点击详情  
![在这里插入图片描述][c36c139cfcb74d4d8be11ab07faef142.png]  
需要开启一些权限，有的权限是默认不开启的，需要我们手动开启

首先肯定是要让插件启动的  
![在这里插入图片描述][40516959b1a64656b551812ba7efe3df.png]  
然后是这两个  
![在这里插入图片描述][09dcc964fd054f8d831d20cbdb93fd83.png]  
这样就可以了，重新访问我们的页面，查看控制台，第一个警告消失了，证明vue.js,devtools插件生效了！  
![在这里插入图片描述][ccc8e22f61b84bdd8d7ce22972e74891.png]

有的人可能会问，为什么这个插件不亮呢，我们现在一行vue代码都没写，还没生效呢，后面随着代码的到来就会亮起来

比如这是我现在写的一个demo，如果有vue代码的话，就会亮起来的  
![在这里插入图片描述][3f14f5821b5244faa9fdb0a6cb792879.png]

## 结尾 ##

安装的路子有很多，我这只是其中一条

不同的版本功能和布局也会有大大小小的不同，有时候可能不是你的开发者工具坏了，而是版本不一致导致你找不到或者不知道怎么用

## 补充 ##

今天我创建了一个vue3.0的项目，本来以为这个开发者工具会失效，重新安装一个vue3.0的开发者工具

因为我以为它只支持vue2.0，没想到出乎我的意外，它不仅仅支持vue2.0还支持vue3.0

![在这里插入图片描述][21bf217715db4caaadc342a85acbed34.png]

[54849ee7f92c42318807486bb8d9b785.png]: https://img-blog.csdnimg.cn/54849ee7f92c42318807486bb8d9b785.png
[cf80750db7364d609adc43494ea4625d.png]: https://img-blog.csdnimg.cn/cf80750db7364d609adc43494ea4625d.png
[c6c35887e8a74601bf63b88ac5bd92ef.png]: https://img-blog.csdnimg.cn/c6c35887e8a74601bf63b88ac5bd92ef.png
[ea4de941ccae4858827c550f83c72764.png]: https://img-blog.csdnimg.cn/ea4de941ccae4858827c550f83c72764.png
[a055ee11145946c8bf063fe9f554615c.png]: https://img-blog.csdnimg.cn/a055ee11145946c8bf063fe9f554615c.png
[3e87bd7799b04145b67bdf5d1bdcb005.png]: https://img-blog.csdnimg.cn/3e87bd7799b04145b67bdf5d1bdcb005.png
[9f11b930992d4dcda604ed12d1bde3e5.png]: https://img-blog.csdnimg.cn/9f11b930992d4dcda604ed12d1bde3e5.png
[202b56da999f4739a63dcce851097c3b.png]: https://img-blog.csdnimg.cn/202b56da999f4739a63dcce851097c3b.png
[87dbb1a333f04114a1dac668886fc3af.png]: https://img-blog.csdnimg.cn/87dbb1a333f04114a1dac668886fc3af.png
[c36c139cfcb74d4d8be11ab07faef142.png]: https://img-blog.csdnimg.cn/c36c139cfcb74d4d8be11ab07faef142.png
[40516959b1a64656b551812ba7efe3df.png]: https://img-blog.csdnimg.cn/40516959b1a64656b551812ba7efe3df.png
[09dcc964fd054f8d831d20cbdb93fd83.png]: https://img-blog.csdnimg.cn/09dcc964fd054f8d831d20cbdb93fd83.png
[ccc8e22f61b84bdd8d7ce22972e74891.png]: https://img-blog.csdnimg.cn/ccc8e22f61b84bdd8d7ce22972e74891.png
[3f14f5821b5244faa9fdb0a6cb792879.png]: https://img-blog.csdnimg.cn/3f14f5821b5244faa9fdb0a6cb792879.png
[21bf217715db4caaadc342a85acbed34.png]: https://img-blog.csdnimg.cn/21bf217715db4caaadc342a85acbed34.png