vue-devTools插件安裝流程?

本文主要介紹 vue的調試工具 vue-devtools 的安裝和使用

工欲善其事, 必先利其器, 快快一起來用vue-devtools來調試開發你的vue項目吧

?安裝:?

1.到github下載：（下載一定要記得是master環境的代碼，默認克隆后進入的是dev環境，執行npm run build會報錯，執行git checkout master切換到master分支）

git clone https://github.com/vuejs/vue-devtools

2.在vue-devtools目錄下安裝依賴包

cd vue-devtools
git checkout master
npm installnpm install webpack -g

3.依賴包下載完后執行npm run build,編譯打包成功后會在shells下生成chrome文件夾。此文件夾就是用來放入chrome的擴展程序。

image

4.擴展Chrome插件

打開Chrome瀏覽器 >選擇更多工具>擴展程序 >打開開發者模式

點擊加載已解壓的擴展程序, 找到剛才生成的chrome文件夾，選擇 vue-devtools > shells > chrome 放入, 安裝成功如下圖

image

6. vue-devtools使用

vue項目, 打開f12, 選擇vue就可以使用了.

vue是數據驅動的, 這樣就能看到對應數據了, 方便我們進行調試

?

怎么樣, 是不是感覺工作效率提高了呢

溫情提示:

1.vue必須引入開發版, 使用min壓縮版是不能使用devtools進行調試的

2.安裝后, 需要關閉瀏覽器, 再重新打開, 才能使用

鏈接https://www.cnblogs.com/chenhuichao/p/11039427.html

鏈接https://huajiakeji.com/utilities/2018-12/1653.html

總結

以上是生活随笔為你收集整理的vue-devTools插件安装流程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。