怎么看vue中某个插件是否安装成功_如何在谷歌中查看VUEX（谷歌浏览器中安装 vue调试工具 vue-devtools）...

本次介绍了两种方法，第一种方法略微复杂，想追求效率的请查看第二种.

20200214141007961.png

如果你在使用vue开发项目 浏览器中没有安装vue调试工具 显然不能算是一个合格的vue开发者.

vue-devtools 开发工具能帮我查看当前组件的显示状态和 追踪vuex中数据状态 能帮我们的开发达到一个事半功倍的效果,无论你以后是测试数据还是检查BUG都会让你一目了然。

1.按照网上的指示安装的

1.1 下载代码之后 解压

1.2 确保你的电脑上安装了npm 如果没有请自行到node.js官网下载。(当然如果你连node.js都不会安装的话，那么VUE肯定也不会了，这个文章将对你毫无作用)

1.3 通过cmd对话框进入到解压后的文件夹的路径 然后运行 npm install

运行成功后如下图所示

20181225143642226.png

1.4 再运行 npm run build.

运行成功后如下图所示

20181225144006192.png

1.5，此时，原有的解压缩文件夹的shell目录下 出现 chrome文件夹

image

1.6打开chrome浏览器，点击相关菜单，打开扩展程序 页面

image

1.7,在Chrome的“扩展程序”页面，确保“开发者模式”处于打开状态，点击“加载已解压的扩展程序”按钮，在打开的文件夹选择窗口，选择“D:\vue-devtools-dev\vue-devtools-dev\shell\Chrome” 文件夹，点击 “确定”按钮

image

1.8，配置完成后将出现以下信息，同时在地址栏右侧有 vue-tools 图标出现。

image

(是不是很复杂，我是用的第二种方法，毕竟程序员的手很金贵.)

2.简单无脑下载

https://chrome.zzzmh.cn/info?token=nhdogjmejiglipccpnnnanhbledajbpd // 点击推荐下载

在谷歌浏览器地址中输入

chrome://extensions/ // 如果没有显示 添加扩展工具的话 请把左侧的开发者模式打开

把解压包里面的那个crx 文件直接拖拽过来 到空白位置 安装成功之后 重启浏览器

注意 vue开发者工具 你得运行一个vue项目才会出来

祝大家 安装成功 (站住！看完了吧，不点个赞就想走？，真当我小咻吃素的是吧，关门放蟑螂。啥？关注了，那行你走吧。小强回来吧)