Vue調試神器vue-devtools安裝方法
更新時間：2017年12月12日 10:39:38 作者：黒客與畫家
本篇文章主要介紹了Vue調試神器vue-devtools安裝方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
什么是vue-devtools？
vue-devtools是一款基于chrome游覽器的插件，用于調試vue應用，這可以極大地提高我們的調試效率。接下來我們就介紹一下vue-devtools的安裝。
安裝方式
1.chrome商店直接安裝：
vue-devtools可以從chrome商店直接下載安裝，非常簡單，這里就不過多介紹了。不過要注意的一點就是，需要翻墻才能下載。
2.手動安裝：
第一步：找到vue-devtools的github項目，并將其clone到本地. vue-devtools
git clone https://github.com/vuejs/vue-devtools.git
第二步：安裝項目所需要的npm包
npm install //如果太慢的話，可以安裝一個cnpm, 然后命令換成 cnpm install
第三步：編譯項目文件
npm run build
第四步：添加至chrome游覽器
游覽器輸入地址“chrome://extensions/”進入擴展程序頁面，點擊“加載已解壓的擴展程序…”按鈕，選擇vue-devtools>shells下的chrome文件夾。
/**
*如果看不見“加載已解壓的擴展程序…”按鈕，則需要勾選“開發(fā)者模式”。
*/
到此添加完成，效果圖如下：
結語：vue-devtools如何使用
當我們添加完vue-devtools擴展程序之后，我們在調試vue應用的時候，chrome開發(fā)者工具中會看一個vue的一欄，點擊之后就可以看見當前頁面vue對象的一些信息。vue-devtools使用起來還是比較簡單的，上手非常的容易，這里就細講其使用說明了。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。好了，接下來可以愉快的調BUG了~！~
相關文章
本篇文章主要介紹了vue Render中slots的使用的實例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-07-07
本文主要介紹了el-form的model、prop屬性和表單校驗等使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
這篇文章主要介紹了Vue傳參一籮筐(頁面、組件)，Vue頁面、組件之間傳參方式繁多，此處羅列出常用的幾種方式，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
vue中json格式化顯示數據(vue-json-viewer)
這篇文章主要給大家介紹了關于vue中json格式化顯示數據(vue-json-viewer)的相關資料,Vue-json-viewer是一個Vue組件,用于在Vue應用中顯示JSON數據的可視化工具,需要的朋友可以參考下2024-05-05
最近做時速云項目部署,需要將前端項目打成鏡像文件,下面這篇文章主要給大家介紹了關于Vue項目打包成Docker鏡像包的簡單步驟,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了Vue中的事件處理詳情，文章通過給按鈕綁定一個?click?事件展開詳細內容介紹，需要的小伙伴可以參考一下2022-05-05
這篇文章主要介紹了詳解vue-cli 本地開發(fā)mock數據使用方法，如果后端接口尚未開發(fā)完成，前端開發(fā)一般使用mock數據。小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
這篇文章主要介紹了vue項目中使用fetch的實現方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
這篇文章主要介紹了談談我在vue-cli3中用預渲染遇到的坑，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-04-04
這篇文章主要介紹了vue使用原生js實現滾動頁面跟蹤導航高亮的示例代碼，滾動頁面指定區(qū)域導航高亮。小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10