vue-devtools的安裝與使用教程
提示：文章寫完后，目錄可以自動(dòng)生成，如何生成可參考右邊的幫助文檔
前言
主要介紹vue-devtools的安裝與使用。
一、vue-devtools是什么？
vue-devtools是一款基于chrome游覽器的插件，用于調(diào)試vue應(yīng)用，這可以極大地提高我們的調(diào)試效率。
二、vue-devtools安裝
1.下載vue-devtools工具
進(jìn)入GitHub官網(wǎng)進(jìn)行下載，網(wǎng)址：https://github.com/vuejs/vue-devtools
下載安裝包并將安裝包進(jìn)行解壓
2.安裝vue-devtools工具
在解壓后的文件夾中打開cmd命令行，在命令行中輸入命令 npm install（若不能使用npm命令，請(qǐng)先安裝node.js）
下載完成后執(zhí)行：npm run build 命令
完成安裝。
然后進(jìn)入 shells\chrome子目錄，編輯 manifest.json 文件，修改persistent 為 true。
修改完成之后，將chrome文件拖至谷歌瀏覽器的擴(kuò)展程序中即可。重啟瀏覽器擴(kuò)展程序即可使用。
若是在npm run build時(shí)出錯(cuò)
我們換一種安裝方式：
首先，創(chuàng)建一個(gè)空文件夾，進(jìn)入這個(gè)文件的終端。
輸入npm install vue-devtools
如上圖，即可完成安裝。
安裝完成后，進(jìn)入該文件下的node_modules 文件，找到 vue-devtools 文件，將vender 文件下的 manifest.json ，修改persistent 為 true。
最后，將vender 文件拖至谷歌瀏覽器的擴(kuò)展程序中即可。重啟瀏覽器擴(kuò)展程序即可使用。
三、vue-devtools的使用
components： 顯示當(dāng)前點(diǎn)擊組件的可用數(shù)據(jù),并可以修改和添加，修改可實(shí)時(shí)反應(yīng)在界面中，非常方便調(diào)試一些業(yè)務(wù)流程比較繁瑣，可以任意展示其中的一步操作的界面。
vuex： 使用vuex時(shí)，這里可以方便查看state,mutaitons, action等信息。
events： 記錄事件，比如點(diǎn)擊事件，當(dāng)你點(diǎn)擊之后，這里會(huì)顯示出來點(diǎn)擊事件來源于哪一個(gè)組件，以及事件名等信息。
Routing 記錄路由的變化，以及路由相關(guān)信息。下拉routes 可以列出當(dāng)前應(yīng)用所有的路由。
總結(jié)
vue devtools 在用vue做的網(wǎng)站上會(huì)變亮但不能查看其結(jié)構(gòu)。只有在本地運(yùn)行的項(xiàng)目才能查看。
到此這篇關(guān)于vue-devtools的安裝與使用教程的文章就介紹到這了,更多相關(guān)vue devtools內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue高德地圖繪制行政區(qū)邊界功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2024-03-03
vue keep-alive請(qǐng)求數(shù)據(jù)的方法示例
本篇文章主要介紹了vue keep-alive請(qǐng)求數(shù)據(jù)的方法示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05
解決Vue不能檢測數(shù)組或?qū)ο笞儎?dòng)的問題
下面小編就為大家分享一篇解決Vue不能檢測數(shù)組或?qū)ο笞儎?dòng)的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02
vue3輸入無效路由跳轉(zhuǎn)到指定error頁面問題
這篇文章主要介紹了vue3輸入無效路由跳轉(zhuǎn)到指定error頁面問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue中Axios中取消請(qǐng)求及阻止重復(fù)請(qǐng)求的方法
為了防止用戶在網(wǎng)絡(luò)不好或者其他情況下短時(shí)間內(nèi)重復(fù)進(jìn)行接口請(qǐng)求，重復(fù)發(fā)送多次請(qǐng)求，本文主要介紹了Vue中Axios中取消請(qǐng)求及阻止重復(fù)請(qǐng)求的方法，感興趣的可以了解一下2022-02-02
VUE3使用Element-Plus時(shí)如何修改ElMessage中的文字大小
在使用Element-plus的Elmessage時(shí)使用默認(rèn)的size無法滿足我們的需求時(shí),我們可以自定義字體的大小,但是直接重寫樣式后,并沒有起作用,甚至使用::v-deep深度選擇器也沒有效果,本文介紹VUE3使用Element-Plus時(shí)如何修改ElMessage中的文字大小,感興趣的朋友一起看看吧2023-09-09
vue-devtools是一款基于chrome游覽器的插件,用于調(diào)試vue應(yīng)用,這可以極大地提高我們的調(diào)試效率，這篇文章主要介紹了vue-devtools的安裝,需要的朋友可以參考下2023-08-08
Vue3?setup的注意點(diǎn)及watch監(jiān)視屬性的六種情況分析
這篇文章主要介紹了Vue3?setup的注意點(diǎn)及watch監(jiān)視屬性的六種情況,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
Vue實(shí)現(xiàn)項(xiàng)目通用配置環(huán)境管理詳解
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)項(xiàng)目通用配置環(huán)境管理的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03
本文通過實(shí)例代碼給大家介紹了Vue起步(無cli)的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2019-04-04