2.1　安装vue-devtools

在使用Vue.js前端框架之前，推荐在浏览器上安装vue-devtools。vue-devtools是一款调试Vue.js应用的开发者浏览器扩展，可以在浏览器开发者工具下调试代码。

不同的浏览器有不同的安装方法，下面以谷歌浏览器为例来说明，具体安装步骤如下：

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

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

步骤02在“扩展程序”界面打开“Chrome网上应用店”链接，如图2-2所示。

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

步骤03在“Chrome网上应用店”搜索“vue-devtools”，如图2-3所示。

图2-3　Chrome网上应用店

步骤04添加搜索到的扩展程序Vue.js devtools，如图2-4所示。

图2-4　添加扩展程序

步骤05在弹出的窗口中选择“添加扩展程序”，如图2-5所示。

步骤06添加完成后，回到扩展程序界面，可以发现已经显示了Vue.js devtools 6.0.0 beta 10调试程序，如图2-6所示。

图2-5　弹出的窗口

图2-6　扩展程序界面

步骤07单击“详细信息”按钮，在展开的页面中选择“运行访问文件网站”选项，如图2-7所示。

图2-7　详细信息页面