admin 管理员组

文章数量: 1184232

文章目录

  • Vue Devtools 插件
    • github 标准安装
      • 下载
      • 安装
    • .crx 快捷安装
    • 应用

Vue Devtools 插件

Vue Devtools 是 Vue 官方发布的浏览器插件，可以安装在 Chrome 和 Firefox 等浏览器上，直接内嵌在开发者工具中。主要用于调试 Vue 项目。

正常下载安装操作如下，但应对不同的 node，vue，chrome 版本，会出现各种各样的问题。为了简单起见，直接找 .crx 格式插件安装文件。如果不想处理各种莫名其妙的问题，请直接查看 .crx 快捷安装这一节。

github 标准安装

以 5.1.1 版本为例，说明通过 github 安装插件步骤。实际版本安装过程中会遇到各种问题，有兴趣的可以操作研究一下。

下载

Github下载地址：https://github/vuejs/vue-devtools/tree/v5.1.1

安装

  1. 解压缩
    解压下载的文件，在这里解压到【D:\个人相关\CSDN\Vue\Vue Devtools\devtools-5.1.1】下。

  2. 安装依赖
    在命令行中切换到解压好的 vue-devtools-5.1.1 目录，使用 npm install 命令进行依赖安装。

  3. 打包
    完后执行 npm run build，编译打包成功后会在项目路径的 shells 文件夹下生成 chrome 文件夹。此文件夹就是用来放入 chrome 的扩展程序。

  4. 扩展 Chrome 插件
    打开 Chrome 浏览器–>选择更多工具–>扩展程序–>打开开发者模式，点击“加载已解压的扩展程序”，选择 devtools-5.1.1 > shells > chrome 放入。如果看不到“加载已解压的扩展程序…”按钮，先勾选“开发者模式”。

.crx 快捷安装

去网上找 6.5.1.crx 插件包（最新版的 6.6.1 有问题），直接添加到扩展 Chrome 插件中就行，插件设置全部打开，设置之后重启浏览器。访问通过 vue 编写的页面右上角 Vue 插件图标高亮，f12 打开开发者工具在 vue 栏可以调式 vue 页面。

应用

本文标签： 插件 Vue devtools

版权声明：本文标题：Vue Devtools 插件下载、安装和应用 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/b/1760301733a3159720.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。