vue項目中安裝vue devtools 神奇地址chrome 網(wǎng)上應(yīng)用商店搜索 vue devtools

極速安裝Vue調(diào)試神器 vue.js devtools（5分鐘搞定）—— 點擊查看最近安裝方法

下面的這種方式耗時耗力，后來又發(fā)現(xiàn)一種全新的極速安裝的方法，直接點擊上方文字查看最新方法。

如果想要堅持使用舊方法的請忽略上面這句話，繼續(xù)往下走就行了。

問題：為什么要安裝該插件：?

答案 ：因為vue是進行數(shù)據(jù)驅(qū)動的，僅僅從chrome瀏覽器的控制臺進行element查看，是看不到數(shù)據(jù)的動向的。

未安裝的情形：

瀏覽器的控制臺會提示你：

下載vue DevTools擴展以獲得更好的開發(fā)體驗；（插件的GitHub地址：https://github.com/vuejs/vue-devtools）

您正在以開發(fā)模式運行Vue。當為生產(chǎn)部署時，一定要打開生產(chǎn)模式。?

更多提示見?https://vuejs.org/Guide/ployment.html。

安裝前的準備

因為安裝依賴需要Node.js環(huán)境。所以，第一件事就是安裝Node.js。

安裝完成之后，從github的下載地址將該插件下載下來：https://github.com/vuejs/vue-devtools

win系統(tǒng)下nodejs安裝及環(huán)境配置 - CSDN博客

安裝步驟

下載之后，解壓文件，然后復(fù)制粘貼解壓的文件，放在某個盤的某個文件夾下面。

然后通過Windows+R這個快捷鍵打開“運行”對話框，輸入cmd，進入命令行。

在命令行內(nèi)，進入到vue-devtools-master目錄下。

先執(zhí)行npm install命令；（執(zhí)行過程比較長，請耐心等待...）

執(zhí)行成功后，再執(zhí)行npm run build命令；

這兩個命令都執(zhí)行成功，就可以關(guān)閉命令行了。

然后進入C:\Software\vue-devtools-master\shells\chrome目錄下，修改mainifest.json?文件中的persistent屬性的值為true。（根據(jù)自己安裝的目錄去找mainifest.json?文件）

打開谷歌瀏覽器 —— 點擊右上角縱向排列的三個點選項 —— 更多工具 —— 右上角勾選開發(fā)者模式（有的已默認勾選了）—— 加載已解壓的擴展程序 —— 找到本地磁盤中vue-devtools-master目錄下的chrome文件夾 —— 選擇該文件夾并點擊確定按鈕。

后來才發(fā)現(xiàn)，其實安裝過程存在進度條的，進度條其實就是圖中的#號。（如下圖所示）

1.執(zhí)行npm install命令

2.執(zhí)行npm run build命令

3.修改mainifest.json?文件

4.打開谷歌瀏覽器，設(shè)置開發(fā)者模式，添加擴展程序文件

至此，恭喜vue devtools插件已經(jīng)安裝成功??！

注：Vue.js devtools插件在chrome瀏覽器安裝成功后，在瀏覽器的右上角會存在一個插件圖標。

5.啟動vue devtools插件

6.打開vue項目,在控制臺選擇vue：

7.點擊vue，查看數(shù)據(jù)

可能會遇到的問題

1.在命令行執(zhí)行npm install時，會長時間停留在fetchMetadata

2.npm install?獲取?fetchMetadata?的階段非常慢，有什么方法可以加速呢？

3.Vue.js devtool插件安裝后無法使用，出現(xiàn)提示“vue.js not detected”的解決辦法