菜鳥安裝vue-devtool 工具
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檔案拖入到頁面中即可,到這裡基本上就安裝完了。
更詳細的安裝教程可以參考這個:
https://www.jianshu.com/p/5c2f5ab3f22f 主要想說的是遇到的一些問題,例如安裝完之後,發現圖示是灰色的,點選圖示還出現 vue.js not detected當時還不能理解,怎麼我安裝完不能用麼?是我沒開啟還是什麼,後面才知道只有當前頁面引用了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