1. 程式人生 > >Google瀏覽器上安裝 Vue Devtools

Google瀏覽器上安裝 Vue Devtools

第一步:到github上下載devtool壓縮包,地址:
https://github.com/vuejs/vue-devtools
解壓後我們得到vue-devtools-master資料夾,在資料夾裡開啟cmd命令列,依次輸入npm install 命令與npm run build 命令,速度較慢,為了加快速度,我們安裝一下淘寶映象(PS:淘寶把外網的東西下載好了,放在它的伺服器上,使我們能夠高速下載,這就是映象)安裝命令為:

npm install -g cnpm –registry=http://registry.npm.taobao.org

此時我們就可以用cnpm install

cnpm run build 代替了。
成功介面如下:
這裡寫圖片描述

npm run build

第二步:開啟shells>chrome>manifest.json,把json檔案裡的”persistent”:false改成true
這裡寫圖片描述

第三步:開啟Google瀏覽器開啟 更多工具—>拓展程式—>開發者模式—>載入已解壓的拓展程式,把shells目錄下的chrome資料夾加進去
這裡寫圖片描述
當我們得到這樣的畫面時就代表安裝成功啦,可以開啟你的vue專案,控制檯點開vue可檢視元件資訊,如果是有vue-cli構建的專案,執行npm run dev,開啟http://localhost:8080/ 伺服器除錯地址
這裡寫圖片描述

注意若沒有執行npm run build命令,就會出現這樣的錯誤:
這裡寫圖片描述

我們來看一下npm run build這個命令做了什麼,開啟package.json這個檔案,可以看到配置了build屬性,而執行的是後面長串的程式碼,所以相當於用簡短易懂的build來代替長串程式碼,實現命令的快捷方式。
這裡寫圖片描述