VUE3VUE-DEVTOOLS安装
VUE3 Vue-Devtools 正确安装，亲测有效
写在前⾯
最近在学习Vue3。学习Vue⾃然离不开debug。Vue官⽅发布了调试⼯具Vue-Devtools。
官⽅⽹址：。
对于Vue3，Vue-Devtools没有正式的发布，⽬前最⾼版本是 6.0.0-beta.21版。因此，⽆法像Vue2-Devtools那样通过 npm install vue-devtools这样的命令来安装。
正确的安装⽅式
只有两种：
1. 从Chrome Web Store（针对chrome）或者Mozilla Addons website（针对Firefox）下载
2. 从上下载源代码，进⾏编译。
本⽂只讲述基于Chrome浏览器的安装，出于众所周知的原因，下⾯来讲第⼆种⽅式。
下载源码
进⼊，在分⽀上我们选择最新的 v6.0.0-beta.21
选好后会刷新当前页⾯，切换到 v6.0.0-beta.21 的内容页。
刷新后，点击右侧的 Code 按钮，下拉项中选择 Download ZIP。
当然，也可以通过Clone⽅式下载，具体操作不在这⾥描述。
下载后解压到⽬录，解压后⽬录如下
在这⾥吐槽⼀下，⽹上好多的帖⼦都告诉你，在这⾥把 packages\shell-chrome⽬录⾥⾯的内容修改下，然后导⼊到Chrome的扩展⾥。亲们，这些说的都是错误的。虽然把src\hook.js⽂件⾥的build全部改为src，然后安装到扩展⾥确实能显⽰安装了扩展插件。但是：
1. vue-Devtools的快捷键是灰⾊的。即使修改了 manifest.json的 "persistent": true也没⽤。
2. 打开Vue3的⽹站后，Vue-Devtools后台会报错。
这是为什么呢？因为以上安装的是源代码，没有编译啊。
在这⾥，作者⾛了不少弯路，浪费不少时间，不说了，都是泪。
接来下，我们就说⼀下如何编译。
编译
NPM的安装就不多说了，我⽤的是最新版本8.3.1
需要注意的是，安装Vue-Devtools的依赖需要⽤到yarn，⽽不是npm，所以⾸先我们要安装yarn。
命令⾏进⼊到解压后的Vue-Devtools⽬录。
执⾏命令：
npm install -g yarn
安装好yarn，通过yarn来安装依赖
yarn install
依赖安装完成后，开始build。
需要注意，这⾥的命令带了watch，如果不带watch，会出错。
具体原因，我也不知道是为什么，如果哪位⼤神知道，望告知。
yarn run build:watch
web下载官方下载
代码执⾏⼀阵后，没有反应，此时Ctrl+C退出即可。
接下来执⾏
yarn run dev:chrome
出现下⾯的界⾯后就可以Ctrl+C退出了。
此时，我们再看⼀下Vue-Devtools⽬录，发现⽣成了 build⽬录。
⾄此，编译完成。
安装
安装过程就不过于详细的介绍了，⽹上有好多。
1. 打开 Chrome 的开发者模式。
2. 拖拽 devtools-6.0.0-beta.21\packages\shell-chrome⽬录到上⾯扩展程序页⾯，会⾃动安装Vue-Devtools插件。
3. 在扩展栏固定Vue-Devtools图标
⾄此，Vue-Devtools插件安装完成，打开vue3⽹站，F12打开调试台，就能看到Vue-Devtools的界⾯按钮。
以上所写内容，实际上早在官⽹上就给出了完整操作步骤。但我开始是在⽹络上搜索相关的安装帖⼦，结果⾛了不少弯路。最后在官⽹到了正确答案，还⾮常简单，让我有⼀种蓦然回⾸，那⼈却在灯⽕阑珊处的⽆奈。
此后学习新的东西还是先从官⽹⼊⼿，引以为戒。

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