谷歌浏览器中使用极简插件安装Vue.js devtools

描述

1.在谷歌浏览器中使用极简插件安装Vue.js devtools,网上搜了很多方法,试了一下都不行,在这里我是用极简插件直接进行安装的。
2.安装了Vue.js devtools,打开浏览器运行代码,还是不能出现Vue控制界面,这个问题,可以从步骤8开始看,希望能帮你解决

步骤

1.打开谷歌浏览器,输入极简插件,并输入Vue.js devtools

谷歌浏览器中使用极简插件安装Vue.js devtools
2.双击打开
谷歌浏览器中使用极简插件安装Vue.js devtools
3.点击推荐下载
谷歌浏览器中使用极简插件安装Vue.js devtools
4.打开文件下载的地址,将文件减压,有三个文件
谷歌浏览器中使用极简插件安装Vue.js devtools
5.打开谷歌浏览器的设置,并找到拓展程序
谷歌浏览器中使用极简插件安装Vue.js devtools
6.这里可以看到自己安装的程序,这里需要把开发者模式打开
谷歌浏览器中使用极简插件安装Vue.js devtools
7.将第四步骤的后缀为CRX的文件拖动到拓展程序页面,点击添加拓展程序
8.在vs code中编写vue代码,注意引用vue.js,而不是vue.min.js,可能是因为后者是压缩版,所以不得行。
谷歌浏览器中使用极简插件安装Vue.js devtools
9.编写好之后,打开浏览器运行,但是这样直接打开,是看不到vue的控制界面的,就像这样
谷歌浏览器中使用极简插件安装Vue.js devtools
10.解决上面的方法是,用服务器打开,需要在vs code中安装一个叫live Server的插件
谷歌浏览器中使用极简插件安装Vue.js devtools
11.在html页面右键,用服务器形式打开
谷歌浏览器中使用极简插件安装Vue.js devtools
12.这样就可以看到开发者界面多了vue,就成功了
谷歌浏览器中使用极简插件安装Vue.js devtools