使用vue开发项目时,如果习惯vue当前项目一些操作后相关数据的变化的日志信息,可以安装一个vue-devtools调试工具。如何安装呢?请看下边:
一:下载与安装:
1.下载好vue-devtools压缩包(crx类型的压缩包),直接解压到你自己选择的本地目录中:
2.打开谷歌浏览器,打开设置,并找到扩展程序:
3. 打开扩张程序按钮后,需要先把右上角的开发者模式打开,默认是关闭状态:
4.点击''加载已解压的扩展程序''按钮,选择刚才你下载并保存vue-devtools工具的目录(我自己是安装在D盘的vue-devtools目录),点击''选择文件夹''按钮即可:
自动回到浏览器后出现如下边图1红色框,然后刷新浏览器,出现图2红色框的标志,说明安装成功了
图1
图2
这样我们就可以在vue-devtools调试界面看到数据变化的日志信息。
二:了解并使用
1.将本地的vue项目跑起来后,在浏览器打开你的项目,打开开发者模式,你会看见地址栏下边多出了vue选项:
2.打开这个vue后,有以下页面(相关按钮的功能介绍如下图):