vue調試工具vue-devtools安裝及使用

本文主要介紹 vue的調試工具 vue-devtools 的安裝和使用。
工欲善其事, 必先利其器, 快快一起來用vue-devtools來調試開發你的vue項目吧。

1.到github下載：git clone https://github.com/vuejs/vue-...

2.在vue-devtools目錄下安裝依賴包：

• cmd中打開剛剛克隆文件的目錄下：（比如我的：F:codevuevue-devtools-master）

  

• 在該目錄下安裝：npm install

3.修改manifest.json文件

• 將代碼中 "persistent":false改成true

4.安裝完成后同在該目錄（比如我的：F:codevuevue-devtools-master）下npm run build

5.擴展Chrome插件

• Chrome瀏覽器 > 更多程序 > 拓展程序

• 點擊加載已解壓程序按鈕, 選擇 vue-devtools > shells > chrome 放入, 安裝成功如下圖

1. vue-devtools使用

打開vue項目, 打開f12, 選擇vue就可以使用了.

vue是數據驅動的, 這樣就能看到對應數據了, 方便我們進行調試 ：