vue-devtool工具是對運用了vue的頁面在瀏覽器中進行除錯的一個工具，進行安裝如下幾個步驟：

1.在github官網中搜索 vue-devtool，然後進行下載壓縮安裝包，或者用git克隆。

2.下載完之後進行解壓，用命令提示行進入到解壓的資料夾。

3.執行命令  npm  install  ，或者用cnpm  install 都可以，後者安裝會更快些，前提是也的安裝了cnpm.

4.安裝完成之後執行npm run build

5.執行完之後開啟  \shells\chrome\manifest.json檔案，然後修改  persistent 為 true

6.瀏覽器中   更多工具-擴充套件程式，然後直接把chrome檔案拖入到頁面中即可，到這裡基本上就安裝完了。

更詳細的安裝教程可以參考這個：

當時還不能理解，怎麼我安裝完不能用麼？是我沒開啟還是什麼，後面才知道只有當前頁面引用了vue.js 這個圖示才會亮起來。然後找了個含有vue的網頁開啟，果然圖示是正常的，但是我f12還是沒看到列表上有vue 除錯的那個框。又是各種查，有的說瀏覽器上vue-devtool 上的允許訪問檔案網址要選上

有的說重新開啟瀏覽器，重新整理然後f12才能看到，也有的說檢查引用的是vue.js 還是引用的vue.min.js,通過篩選，覺得只有最後一個可以試試，但是因為第一次接觸，還是菜鳥，還一直在想在哪檢查是引用的vue.js還是vue.min.js,剛開始還以為是下載的包裡是vue.min.js，但是翻了包也沒見有這個檔案，最後終於意識到你除錯頁面自然而然是看頁面上使用的vue.min.js還是vue.js，然後自己簡單寫了一個例子，終於出現了除錯面板。後面想想簡直要被自己蠢哭了。。。。

通過查閱總結一下幾個需要注意的地方：

1.重新開啟瀏覽器

2.允許訪問檔案地址

3.修改persistent為true

4.頁面要引用 vue.js