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

vue devtools使用教程

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

移動端
vue devtools插件v5.0.0

大?。?75KB語言：

類型：瀏覽輔助等級：

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

vue devtools使用教程

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

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

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

vue devtools安裝教程

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

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

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

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

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

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

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