2.3　安装vue-devtools

vue-devtools是一款调试Vue.js应用的开发者浏览器扩展，可以在浏览器开发者工具下调试代码。不同的浏览器有不同的安装方法，以浏览器为例，其具体安装步骤如下：

（1）打开浏览器，单击“自定义和控制”按钮，在打开的下拉菜单中选择“更多工具”菜单选项，然后在弹出的子菜单中选择“扩展程序”菜单项，如图2-16所示。

图2-16　选择“扩展程序”菜单项

（2）在“扩展程序”界面中单击“Chrome网上应用店”链接，如图2-17所示。

图2-17　“扩展程序”界面

（3）在“chrome网上应用店”搜索“vue-devtools”，如图2-18所示。

图2-18　chrome网上应用店

（4）添加搜索到的扩展程序Vue.js devtools，如图2-19所示。

图2-19　添加扩展程序

（5）在弹出的窗口中单击“添加扩展程序”按钮，如图2-20所示。

图2-20　单击“添加扩展程序”按钮

（6）添加完成后，回到扩展程序界面，可以发现已经显示了Vue devtools调试程序，如图2-21所示。

图2-21　扩展程序界面

（7）单击“详细信息”按钮，在展开的页面中选择“允许访问文件网址”选项，如图2-22所示。

图2-22　详细信息页面