Vue-devtools的安裝與使用

這裡我是先看了這篇文章的:https://www.cnblogs.com/teamemory/p/12399191.html

步驟:

1、下載下傳mater 分支 的vue-devtools(我使用的是4.1.5版本)，我當時直接在vue官網進入devtools下載下傳後npm run build會報錯(是以切記要下載下傳mater分支下的vue-devtools)

下載下傳位址:

mater分支下載下傳位址:https://github.com/vuejs/vue-devtools/tree/master

2、将下載下傳好的安裝包解壓到一個目錄中，使用指令行cd到剛剛解壓好的vue-devtools-mater下，執行npm install或者是cnpm install(cnpm需要自己先下載下傳)

3、執行npm run build,如下圖:

4、打開谷歌浏覽器，輸入 chrome://extensions/ 網址，進入到擴充程式界面，點開右上角的”開發者模式“，點選”加載已解壓的擴充程式“，選擇檔案夾路徑為:\vue-devtools-master\shells\chrome點選确認。如下圖代表添加成功。

5、重新啟動vue項目，重新打開F12調試工具，就可以看到vue選項。如果還不能看到vue選項，就重新啟動下浏覽器即可。

注意事項:一定要去下載下傳mater 分支下 的vue-devtools，dev的目前測試npm run build 會失敗。

備注:這是我第一次寫部落格，如有哪裡做的不好的地方請多指教。