Vue 官方贈送的橙色裝備

上一回：速看 Vue 世界的生命輪迴

書接上文，上一回我們快速的瞭解了 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 到本地，進行編譯再本身安裝到瀏覽器上。具體怎麼作呢？

1. 將 vue-devtools 項目 clone 到本地目錄

git clone https://github.com/vuejs/vue-devtools.git
複製代碼

2. 使用 npm 來安裝所須要的全部包

npm install
複製代碼

3. 編譯項目的全部文件

npm run build
複製代碼

4. 把編譯好的文件，安裝到 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 官方贈送的這個橙色裝備你接收了嗎？

下一回：Vue 的初階黑魔法 — 模板語法