書接上文，上一回我們們快速的瞭解了 Vue 的生命週期，知道了在 Vue 的生命週期中存在三個比較重要的階段，分別是 Created、Mounted 和 Destroyed。接下來，我們們就來說一說 Vue 官方贈送的橙色裝備 —— vue-devtools。
說到 vue-devtools，使用 Vue 開發的時候 Vue 官方推薦在瀏覽器安裝 Vue Devtools 這個工具。這個時候可能你會問了，這個工具是幹啥用的吖？別急，且聽我慢慢道來。
我們先來說一說怎麼來安裝這個工具。想要安裝 Vue Devtools 工具，可以訪問 github.com/vuejs/vue-d… 地址，裡面有比較詳細的介紹。怎麼滴呢？因為 Vue 官方已經把 Vue Devtools 工具開源並託管在全球最大同性社交網站 GitHub 上了。
地址告訴你了，再來說一說 Vue Devtools 工具是幹啥用的吧。Vue Devtools 工具提供了一個友好的介面，在這個介面中可以審查和除錯 Vue 程式碼。
說到這兒啊，我們得多說兩句了。為啥呢？很多人對開發來說都存在著一個誤區，這個誤區就是認為程式設計師只要開發程式，敲程式碼就好了。其實不然，程式設計師幾乎每天都要面對著一個問題，就是怎麼解決各種各樣的程式碼問題。這個時候，程式碼的審查和除錯工具就尤為重要。
這麼說吧！就像你吃飯，但也得把它們拉出去，這就說明筷子和馬桶對你來說是同等的重要。當然了，這個比喻不是那麼地恰當！你自己理解就好。
安裝 Vue Devtools 工具
我們們閒言少敘，書歸正傳。
接下來，我們們再來說一說怎麼來安裝 Vue Devtools 工具。第一種方式，是最簡單最直接最暴力的。就是通過 Vue 官方提供的連結，直接安裝對應的版本。
這裡需要說明一點的，就是 Chrome 瀏覽器的版本是直接訪問 Chrome 應用商店的。為啥要單獨說這個，因為 Chrome 應用商店在國內是被牆的，所以你懂的。
這個你是不是很想罵街，我第一次知道的時候，也想罵街。但是別急，我們還有 PlanB 呢！
就是通過 Git 工具把 Vue Devtools 工具的開源專案 clone 到本地，進行編譯再自己安裝到瀏覽器上。具體怎麼做呢？
- 將 vue-devtools 專案 clone 到本地目錄
git clone https://github.com/vuejs/vue-devtools.git
複製程式碼- 使用 npm 來安裝所需要的所有包
npm install
複製程式碼- 編譯專案的所有檔案
npm run build
複製程式碼-
把編譯好的檔案，安裝到 Chrome 瀏覽器中
輸入地址 chrome://extensions/ 進入擴充套件程式頁面，點選“載入已解壓的擴充套件程式”按鈕。
褲襠裡面著火，當然了！Vue Devtools 工具的開源專案中也提供一些其他方式的使用方式，有興趣就自行研究吧！我們就不再這兒多費口舌了。
Vue Devtools工具的注意事項
說到這兒呢！基本上，你應該可以成功地安裝上 Vue Devtools 工具了。什麼？還沒安裝成功？！拉出去槍斃五分鐘！
安裝成功之後，我們們還得說一說 Vue Devtools 工具使用的一些注意事項。
第一呢，就是 Vue 核心庫的檔案類似於 jQuery，也是提供了兩個檔案，一個開發者版，一個生產版（壓縮之後的）。如果你使用的是生產版本的 Vue 核心庫檔案的話，Vue Devtools 這個工具預設是被禁用的。換句話講，你要想使用 Vue Devtools 工具的話，就得使用開發者版的 Vue 核心庫檔案。
為啥要這麼做？這是為了當你使用 Vue 開發的應用正式上線之後，來保護你的核心程式碼邏輯的。
再有呢，要通過“file://”協議開啟的 Vue 開發的網頁，需要在 Chrome 瀏覽器的擴充套件程式管理皮膚中選中此擴充套件程式的“允許訪問檔案網址”。
好了，關於 Vue Devtools 工具我們們基本上算是介紹完了。Vue 官方贈送的這個橙色裝備你接收了嗎？