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代理如何配置重寫方法(pathRewrite與rewrite)
這篇文章主要介紹了vue代理如何配置重寫方法(pathRewrite與rewrite),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
本文主要介紹了nuxt.js框架使用小結(jié),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-08-08
Vue動(dòng)態(tài)權(quán)限登錄實(shí)現(xiàn)(基于路由與角色)
很多應(yīng)用都會(huì)需要對(duì)不同的用戶進(jìn)行權(quán)限控制，本文主要介紹了Vue動(dòng)態(tài)權(quán)限登錄實(shí)現(xiàn)(基于路由與角色)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
Vue使用高德地圖選點(diǎn)定位搜索定位功能實(shí)現(xiàn)
這篇文章主要介紹了Vue使用高德地圖選點(diǎn)定位搜索定位功能,文中給大家提到了常見問題解決方法，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-10-10
富文本編輯器vue2-editor實(shí)現(xiàn)全屏功能
這篇文章主要介紹了富文本編輯器vue2-editor實(shí)現(xiàn)全屏功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-05-05
vue3中的reactive函數(shù)聲明數(shù)組方式
這篇文章主要介紹了vue3中的reactive函數(shù)聲明數(shù)組方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要給大家介紹了關(guān)于vue源碼之批量異步更新策略的相關(guān)資料，關(guān)于vue異步更新是我們?nèi)粘ｉ_發(fā)中經(jīng)常遇到的一個(gè)功能，需要的朋友可以參考下2021-05-05
vue中this.$message的實(shí)現(xiàn)過程詳解
Message在開發(fā)中的使用頻率很高，也算是Element-UI組件庫(kù)中比較簡(jiǎn)單的，對(duì)于感興趣的朋友可以一起探討一下Message組件的實(shí)現(xiàn)，本文詳細(xì)介紹了vue中this.$message的實(shí)現(xiàn)過程，感興趣的同學(xué)可以參考一下2023-04-04
vue中如何使用lodash的debounce防抖函數(shù)
防抖函數(shù) debounce 指的是某個(gè)函數(shù)在某段時(shí)間內(nèi),無論觸發(fā)了多少次回調(diào),都只執(zhí)行最后一次,在Vue中使用防抖函數(shù)可以避免在頻繁觸發(fā)的事件中重復(fù)執(zhí)行操作,這篇文章主要介紹了vue中使用lodash的debounce防抖函數(shù),需要的朋友可以參考下2024-01-01
vue項(xiàng)目中vue.config.js文件詳解
vue.config.js?是一個(gè)可選的配置文件,如果項(xiàng)目的?(和?package.json?同級(jí)的)?根目錄中存在這個(gè)文件,那么它會(huì)被?@vue/cli-service?自動(dòng)加載,這篇文章主要介紹了vue項(xiàng)目中vue.config.js文件的介紹,需要的朋友可以參考下2024-02-02