iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 7
0
Modern Web

30天手把手的vue.js教學!系列 第 7

2020it邦鐵人賽-30天手把手的Vue.js教學 Day7-認識Vue-devtool

tags: Vue.js ItIron2020

前言

昨天我們利用了一個簡單的計算機專案複習了目前為止所學的東西,在繼續往下介紹vue之前,今天要臨時插入一個小工具的介紹 - vue-devtool,善用vue-devtool可以幫助你檢查每個vue實體中的狀態,讓你更清楚發生了什麼事情!
馬上就開始吧,別擔心! 今天的內容相對簡短很多的!

到底什麼是vue-devtool?

vue-devtool是個用於檢視vue專案的一個chrome套件,我們可以輕鬆的利用它查看每個組件間的資料,未來接觸到vuex時也同樣可以利用vue-devtool查看目前集中管理的資料,在很多時候都可以協助你進行除錯! 是個相當方便的小工具!

Getting Started

首先請先造訪該套件的頁面並予以安裝,這個套件在偵測到目前頁面是vue專案時會自動啟動,這時候我們需要一個實際的vue專案做示範!
麻煩請先在你的終端機輸入以下的指令,將我之前寫的vue-calculator拉到你的本地電腦。

git clone https://github.com/windate3411/vue-calculator.git

接著進入專案資料夾

cd vue-calculator

並安裝相依的套件

npm i

安裝完成後,輸入以下指令並到http://localhost:8080/ 就可以在本地瀏覽昨天的計算機專案囉!

npm run serve

打開該頁面後,請打開你的console,你應該會看到以下的畫面

vue-devtool

注意一下右上方的紅圈處,這表示套件正在順利運行中!

使用vue-devtool觀察組件間的資料

接著請你點開devtool右側的下拉選單,你應該會看到一個Vue的選項

vue-devtool2

打開選單後,你就會看到目前專案的結構,在這個示範專案中APP組件下有一個Calculator組件,也就是我們這次的計算機專案,請點擊它,你應該會看到這樣的畫面。

vue-devtool3

接著我們馬上來看一下裡面有什麼內容吧!

在右側的導覽版中,你目前只有看到一個data屬性,裡面有著我們用在專案data屬性中的所有變數,請你隨意點擊按鈕,觀察在導覽頁面中,組件資料的變化。
下方的圖檔示範的是current的變化,請特別注意右側的值。
gif demo

還記得在專案中我們是利用current來顯示最終的計算結果嗎? 我們每一次點擊數字或是運算時都會影響到current的值,而這些變化也會同步反應在vue-devtool中,你不需要像以往一樣console.log印出每一個想知道的數值,只要用vue-devtool就可以輕鬆的查看囉!

結語

今天的內容相當相當簡略,長度是以往文章的一半? 主要是跟各位介紹這個小工具的基本應用,未來你在打造本地的vue專案時,它會是你debug的好幫手的! 明天開始我們會繼續介紹vue中的屬性,負擔又會開始比較大一些! 大家加油吧!

此文章同步發布於個人部落格,有興趣的大大也可以來參觀一下:D


上一篇
2020it邦鐵人賽-30天手把手的Vue.js教學 Day6-打鐵趁熱,利用所學打造簡單的計算機專案吧!
下一篇
2020it邦鐵人賽-30天手把手的Vue.js教學 Day8 - 認識computed屬性
系列文
30天手把手的vue.js教學!30

尚未有邦友留言

立即登入留言