Vue項目中使用Vue.js devTools這款調試神器,可以極大程度的提高我們的開發效率。
安裝
1、打開Chrome網上應用商店安裝插件(自牆),直接搜索devTools安裝即可。貴賓傳送陣,請戳這里→Chrome網上應用商店
2、從github上下載到本地。貴賓傳送陣,請戳這里→vue-devtools
1)、進入到/vue-devtools
目錄下(npm install或者cnpm install)安裝項目所需依賴。
2)、安裝完依賴后(npm run build或者cnpm run build)編譯項目。
3)、編譯完項目后,在/vue-devtools/shell/chrome/manifest.json
中修改persistent參數false為true。
4)、在chrome擴展程序頁面,打開“開發者模式”,點擊“加載已解壓的擴展程序”按鈕,選擇你本地的.../vue-devtools/shell/chrome
文件夾, 添加完成后,勾選允許文件地址是否訪問。
安裝完成后devTools的圖標會出現在瀏覽器的菜單欄中。
以上兩種安裝方式告一段落。下面讓我們在vue項目中體驗一下這款調試神器吧。
使用
運行Vue項目,在Chrome瀏覽器中展示項目(瀏覽器菜單欄中的devTools圖標會亮起),按F12打開開發者工具,在開發者工具的菜單欄最后面會看到Vue,選中它就可以盡情的使用了。
當然這樣一頓行雲流水的操作下來,有些人會一次成功,而有些人則不會成功,瀏覽器菜單中的devTools圖標亮滴鴨批,但是就是在開發者工具的菜單欄最后面看不到Vue。嗯~~~,怎么肥事小老弟?
請查看項目的index.html中,對vue.js的引用。你肯定使用了壓縮版的vue.min.js,使用vue.min.js默認為生產環境,會導致devTools不顯示,改為vue.js即可。