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查看組件的狀態