大家好，又見(jiàn)面了，我是你們的朋友風(fēng)君子。如果您正在找激活碼,請(qǐng)點(diǎn)擊查看最新教程,關(guān)注關(guān)注公眾號(hào) “全棧程序員社區(qū)” 獲取激活教程,可能之前舊版本教程已經(jīng)失效.最新Idea2022.1教程親測(cè)有效,一鍵激活。

Jetbrains全家桶1年46，售后保障穩(wěn)定

第一步：下載源碼

在github下載devtools源碼，地址：
https://github.com/vuejs/vue-devtools

第二步：執(zhí)行命令

??下載好后進(jìn)入vue-devtools-master工程 執(zhí)行cnpm install, 下載依賴(lài)，然后執(zhí)行npm run build，編譯源程序。


cmd回車(chē)后進(jìn)入到vue devtools的安裝目錄下。

?先查看一下registry:
npm congfig get registry
?結(jié)果為 ：

??注意：這樣子使用npm install很慢，所以設(shè)置一下鏡像,用set命令換成阿里的鏡像就可以了
先執(zhí)行命令：npm config set registry https://registry.npm.taobao.org
然后再執(zhí)行命令：npm install

或者直接執(zhí)行命令npm install --registry=https://registry.npm.taobao.org也可。
正在安裝中：

??如果出現(xiàn)：Unexpected end of JSON input while parsing near錯(cuò)誤
執(zhí)行 npm cache clean --force即可解決

接著進(jìn)行npm install, 下載依賴(lài)，然后執(zhí)行npm run build，編譯源程序。

第三步：查看編譯后的目錄

（1）編譯完成后，目錄結(jié)構(gòu)如下：

（2）修改shells/chrome目錄下的mainifest.json 中的persistant為true：

第四步：打開(kāi)Google，添加擴(kuò)展

打開(kāi)谷歌瀏覽器的設(shè)置—>擴(kuò)展程序，并勾選開(kāi)發(fā)者模式：

??然后將剛剛編譯后的工程中的shells目錄下的chrome這整個(gè)文件夾直接拖拽到當(dāng)前瀏覽器中，即可將插件安裝到瀏覽器。

重啟進(jìn)入到擴(kuò)展頁(yè)面就如圖所示了：

第五步：測(cè)試vue devtools

打開(kāi)一個(gè)已有的vue項(xiàng)目，運(yùn)行項(xiàng)目，然后按F12，就可以看到多出一個(gè)Vue選項(xiàng)了 。

到此為止，Vue調(diào)試工具安裝就已經(jīng)成功并且可以使用了。

---

楠哥——-一心想為IT行業(yè)添磚加瓦，卻總是面向cv編程的程序員。

??謝謝閱讀，無(wú)誤點(diǎn)贊，有誤還望評(píng)論區(qū)指正。

---

總結(jié)

以上是生活随笔為你收集整理的Vue调试工具安装（vue devtools）(什么是vue)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。