vue-devtools是一款基於chrome遊覽器的插件，用於調試vue應用，這能夠極大地提升咱們的調試效率。接下來咱們就介紹一下vue-devtools的安裝。vue
1.chrome商店直接安裝
2.手動安裝
第一步：找到vue-devtools的github項目，並將其clone到本地. vue-devtools
git clone https://github.com/vuejs/vue-devtools.git
第二步：安裝項目所須要的npm包
npm install //若是太慢的話，能夠安裝一個cnpm, 而後命令換成 cnpm install
第三步：編譯項目文件
npm run build
第四步：添加至chrome遊覽器
流覽器地址「chrome://extensions/」進入擴展程序頁面，點擊「加載已解壓的擴展程序...」按鈕，選擇vue-devtools>shells下的chrome文件夾。 /** *若是看不見「加載已解壓的擴展程序 按鈕，則須要勾選「開發者模式」。 */
到此添加完成，效果圖以下：git
結語：vue-devtools的使用
當咱們添加完vue-devtools擴展程序以後，咱們在調試vue應用的時候，chrome開發者工具中會看一個vue的一欄，點擊以後就能夠看見當前頁面vue對象的一些信息。vue-devtools使用起來仍是比較簡單的，上手很是的容易，這裏就細講其使用說明了。github
