2.1　安装Vue Devtools

在使用Vue前端框架前，推荐在浏览器（如Google Chrome）上安装Vue Devtools。它可以让开发者在一个友好的界面中审查和调试Vue应用程序。如果能访问国外网站的读者，可以直接访问Google Web Store，在搜索栏中搜索vuejs-devtools进行安装。如果不能访问国外网站的读者，可以进行手动下载Vue Devtools并安装。具体操作步骤如下。

（1）在github上下载Vue Devtools压缩包，如图2-1所示。

图2-1　下载Vue Devtools

（2）下载完成后进入vue-devtools（见图2-2），执行以下命令，安装构建工具所需要的依赖。

图2-2　执行cnpm install等命令

    cnpm install
    npm run build

（3）安装成功后，打开Google Chrome的扩展程序菜单，如图2-3所示。

图2-3　Google Chrome的扩展程序菜单

（4）打开Google Chrome的扩展程序后，单击右上角的“开发者模式”，并单击“加载已解压的扩展程序”，选择shells下的chrome文件夹进行安装，如图2-4所示。

图2-4　安装Vue Devtools

（5）再次打开Vue项目时，就可以在Chrome调试工具中通过Vue Devtools查看组件的状态，如图2-5所示。

图2-5　使用Vue Devtools查看组件的状态