vue3 axios 浏览器 vue浏览器工具

转载

autohost 2023-12-27 12:45:44

文章标签 vue3 axios 浏览器 Vue chrome 官网 文章分类 iOS 移动开发

其实只用装VUE3 Vue-Devtools 正确安装，vue2和vue3都亲测有效
写在前面
正确的安装方式
下载源码
编译
安装
写在前面
最近在学习Vue3。学习Vue自然离不开debug。Vue官方发布了调试工具Vue-Devtools。
官方网址：Vue-Devtools。

对于Vue3，很多人去装了vue2的vue-devtool 打开着vue3的项目因为大家都没注意到这点，所以我发这篇博文。我看了下，现在网上大多还都是一搜devtool安装都是vue2的，要专门去搜vue3才能有但是谁又能想到不兼容呢

正确的安装方式
只有两种：

从Chrome Web Store（针对chrome）或者Mozilla Addons website（针对Firefox）下载
从Github上下载源代码，进行编译。
本文只讲述基于Chrome浏览器的安装，出于众所周知的原因，下面来讲第二种方式。

下载源码
进入官网，在分支上我们选择最新的 v6.0.0-beta.21

选好后会刷新当前页面，切换到 v6.0.0-beta.21 的内容页。
刷新后，点击右侧的 Code 按钮，下拉项中选择 Download ZIP。

当然，也可以通过Clone方式下载，具体操作不在这里描述。

在这里吐槽一下，网上好多的帖子都告诉你，在这里把 packages\shell-chrome目录里面的内容修改下，然后导入到Chrome的扩展里。亲们，这些说的都是错误的。虽然把src\hook.js文件里的build全部改为src，然后安装到扩展里确实能显示安装了扩展插件。但是：

vue-Devtools的快捷键是灰色的。即使修改了 manifest.json的 "persistent": true也没用。
打开Vue3的网站后，Vue-Devtools后台会报错。
这是为什么呢？因为以上安装的是源代码，没有编译啊。
在这里，作者走了不少弯路，浪费不少时间，不说了，都是泪。
接来下，我们就说一下如何编译。

编译
NPM的安装就不多说了，我用的是最新版本8.3.1
需要注意的是，安装Vue-Devtools的依赖需要用到yarn，而不是npm，所以首先我们要安装yarn。
命令行进入到解压后的Vue-Devtools目录。

执行命令：

npm install -g yarn
1
安装好yarn，通过yarn来安装依赖

yarn install
1
依赖安装完成后，开始build。
需要注意，这里的命令带了watch，如果不带watch，会出错。
具体原因，我也不知道是为什么，如果哪位大神知道，望告知。

yarn run build:watch
1
代码执行一阵后，没有反应，此时Ctrl+C退出即可。
接下来执行

yarn run dev:chrome
1
出现下面的界面后就可以Ctrl+C退出了。

此时，我们再看一下Vue-Devtools目录，发现生成了 build目录。

至此，编译完成。

安装
安装过程就不过于详细的介绍了，网上有好多。

打开 Chrome 的开发者模式。

拖拽 devtools-6.0.0-beta.21\packages\shell-chrome目录到上面扩展程序页面，会自动安装Vue-Devtools插件。

在扩展栏固定Vue-Devtools图标