如何安装vue3版本的Vue Devtools

相信我们在学习Vue2的时候为了方便测试组件中的数据，会为此下载一个调试工具Vue Devtools。

那么在我们学习Vue3的过程中呢，其实Vue3也有属于自己的Vue Devtools，具体怎么安装可以参考以下。此文章以Chrome浏览器为例。

首先，我们需要在官网上找到相对应的版本下载下来，这里有一个网址，来下载源码

下载源码

官网

进入到里面，我们可以看到这样一个页面

然后,我们可以找到下图所示点进去

接着可以看到有好多版本可以供我们选择，点击下图所示进行下载

在这里我选择的是v6.5.1版本

下载完之后，我们需要将它进行解压，解压完后如下图

编译

接着，在此目录打开命令行，输入以下命令

yarn install

以上命令如果没有安装yarn，需先安装yarn

npm i yarn -g

在使用yarn install命令的时候，注意网络的问题，如果网络慢可能会无法成功安装，例子如下：

这个时候我们就要去看看自己的镜像源了，我在下载的时候使用的是国外的镜像源导致网络非常慢，最终也是没有成功安装，建议大家使用淘宝的镜像源，切换镜像源的命令如下：

yarn config set registry https://registry.npm.taobao.org/

切换完镜像源之后，我也是成功的安装了，接着我们就来进行下一步。

yarn run build:watch

执行完以上之后，命令行是这样的

一直等到它不动了为止，接着Ctrl+C输入以下命令

yarn run dev:chrome

执行完这行命令之后也就算编译完了。

使用

想要使用它的话，需要找到在Chrome浏览器中的扩展程序，并且打开它里面的开发者模式
，然后找到以下目录

将这个目录下的文件夹拖进扩展程序的页面就行了

最后，打开我们的vue3项目，就可以在检查的界面看到我们的Vue了。