如何添加Vue扩展程序

如何添加Vue扩展程序

1. 打开谷歌浏览器

1）点开右上角三点的地方，找到更多工具，再找到扩展程序，然后点开，选中开发者模式。

2）把“Vue.js Devtools_5.3.3_chrome.zzzmh.cn.crx”拖到扩展程序页面，即可安装成功。

3）点击devtools的“详细信息”，选中“允许访问文件网址”。

4）允许html页面，页面的右上角会有一个vue的专属图片，点击这个图片，显示“Vue.js is detected on this page.
Open DevTools and look for the Vue panel.”，则Vue Devtools可以使用了。

5）点击F12，进入调试页面，调试窗口会出现Vue这个选项。

注：

如果运行的时候，页面右上角的Vue专属图片点击之后是显示“Vue.js is detected on this page.
Devtools inspection is not available beacause it’s in production mode or explicity disabled by the author.”
原因：
1、引入https://cdn.jsdelivr.net/npm/vue是不行的，引入vue.js才能使用vue-devtools。
2、在chrome的扩展程序页面，需要勾选vue-devtools的“允许访问文件地址”项。