當(dāng)前位置：軟件學(xué)堂 > 資訊首頁(yè) > 網(wǎng)絡(luò)編程 > 編程其他 > vue devtools使用教程

vue devtools使用教程

2020/7/28 16:09:34作者：佚名來源：網(wǎng)絡(luò)

移動(dòng)端
vue devtools插件v5.0.0

大?。?75KB語(yǔ)言：

類型：瀏覽輔助等級(jí)：

這里為用戶們整理了vue devtools使用教程，可幫助大家快速輕松上手操作使用軟件，同時(shí)也為你們帶來了vue devtools安裝教程，這是小編親手親自安裝的，用戶可放心對(duì)軟件進(jìn)行安裝，希望這是你們能夠用得上的，快來學(xué)習(xí)了解一下吧。
vue devtools

vue devtools使用教程

1、在使用之前必須對(duì)vue項(xiàng)目進(jìn)行相關(guān)設(shè)置，打開shells>chrome>src>manifest.json并把json文件里的"persistent":false改成true

2、chrome瀏覽器按f12，即可看到vue菜單

3、點(diǎn)擊vue菜單，即可看到左側(cè)組件嵌套情況，右側(cè)則可選擇查看組件，vuex數(shù)據(jù)倉(cāng)庫(kù),事件派發(fā)情況，vue-router，工具設(shè)置等等
4、點(diǎn)擊某個(gè)組件，還可以看到該組件對(duì)應(yīng)的真實(shí)dom，傳入的props、data等

vue devtools安裝教程

1、下載并解壓文件包，得到插件，如下圖所示：

2、在安裝vue devtools插件之前，要確保你安裝了谷歌Chrome瀏覽器
3、從設(shè)置->更多工具->擴(kuò)展程序 打開擴(kuò)展程序頁(yè)面，或者地址欄輸入 Chrome://extensions/ 按下回車打開擴(kuò)展程序頁(yè)面

4、打開擴(kuò)展程序頁(yè)面的“開發(fā)者模式”

5、將Vue.js Devtools_5.0.0.crx文件拖拽到擴(kuò)展程序頁(yè)面，完成安裝

若出現(xiàn)”CRX-HEADER-INVALID”無效情況，解決方法請(qǐng)參考收藏貓插件

6、將本地的vue項(xiàng)目跑起來后，在瀏覽器打開你的項(xiàng)目，打開開發(fā)者模式，你會(huì)看見地址欄下邊多出了vue選項(xiàng)

標(biāo)簽： 插件  vue devtools