本篇文章為大家展示了vue-devtools調試工具怎么在VUE項目中安裝，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

成都創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供銅川網(wǎng)站建設、銅川做網(wǎng)站、銅川網(wǎng)站設計、銅川網(wǎng)站制作等企業(yè)網(wǎng)站建設、網(wǎng)頁設計與制作、銅川企業(yè)網(wǎng)站模板建站服務，十余年銅川做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡服務。

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創(chuàng)建可維護性和可測試性更強的代碼庫，Vue允許可以將一個網(wǎng)頁分割成可復用的組件，每個組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網(wǎng)頁中相應的地方，所以越來越多的前端開發(fā)者使用vue。

1. 通過 Git 克隆項目到本地

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

2. Git 進入到 vue-devtools 所在目錄，然后運行以下兩個指令。

先運行 npm install 安裝項目依賴

再運行 npm run build 進行編譯生成

這兩條指令的運行都需要一定的時間，請耐心等待，build 成功后如下圖：

3.修改安裝目錄vue-devtools\shells\chrome 中 的manifest.json文件。 將persistent 參數(shù)改為 true，如下圖：

4. 將擴展程序添加到chrome瀏覽器

a. 打開瀏覽器擴展程序（也可以直接在地址欄輸入 chrome://extensions/ 來打開）

b. 打開擴展程序后，開啟 開發(fā)者模式，點擊 加載已解壓的擴展程序 按鈕

c. 選擇 vue-devtools > shells 目錄下的 Chrome 文件夾，成功后如下圖：

加載成功后，先啟用，然后點擊旁邊的刷新按鈕，瀏覽器右上角就會出現(xiàn)一個Vue的logo圖標

5. 到此調試工具安裝完成。

需要注意的項： vue調試工具請在開發(fā)模式下使用，生產(chǎn)環(huán)境中不行。即 vue.min.js 文件下，調試工具無效。

下面看下vue調試工具vue-devtools的安裝方法

先導

vue-devtools是一款基于chrome瀏覽器的插件，用于vue應用的調試，這款vue調試神器可以極大地提高我們的調試效率。幫助我們快速的調試開發(fā)vue應用。

第一步：

  我們可以先從github上找到vue-devtools的項目，下載到本地。下載vue-devtools鏈接。

克隆方法：git clone  https://github.com/vuejs/vue-devtools.git

第二步：

  解壓下載好的文件，進入到vue-devtools目錄，安裝項目所需要的依賴包。

安裝方法：npm install  或者  cnpm install （注：cnpm命令是國內(nèi)的鏡像，速度會快一些）

第三步：

   編譯項目文件。

編譯方法：npm run build


第四步：

修改安裝目錄vue-devtools\shells\chrome 中 的manifest.json文件。 persistent參數(shù)改為true，訪問協(xié)議是否包含：

1.http://*/*; 2.https://*/*; 3.file:///*;這三種情況

第五步：

           添加至瀏覽器：

添加方法：在chrome瀏覽器輸入地址：“chrome://extensions/”進入擴展程序頁面，然后點擊“加載已解壓的擴展程序...”按鈕；選擇vue-devtools>shells目錄下的Chrome文件夾；還需允許文件地址是否訪問。如果看不到“加載已解壓的擴展程序...”按鈕，先勾選“開發(fā)者模式”。如下圖:

第六步：

使用：

    打開我們的vue應用，打開調試，點擊vue擴展圖標，就可以使用了。如下圖：

注：如果點擊vue擴展圖標還是提示：Vue.jsis detectedonthis page. Open DevToolsand lookfor the Vue panel.
可以檢查下你是否使用的是壓縮版本的vue.min.js，使用vue.min.js默認為生產(chǎn)環(huán)境的，需要改為vue.js.

上述內(nèi)容就是vue-devtools調試工具怎么在VUE項目中安裝，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。