vue-devtools調試工具怎么在VUE項目中安裝

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

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創建可維護性和可測試性更強的代碼庫，Vue允許可以將一個網頁分割成可復用的組件，每個組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網頁中相應的地方，所以越來越多的前端開發者使用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 參數改為 true，如下圖：

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

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

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

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

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

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

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

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

先導

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

第一步：

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

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

第二步：

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

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

第三步：

   編譯項目文件。

編譯方法：npm run build


第四步：

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

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

第五步：

           添加至瀏覽器：

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

第六步：

使用：

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

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

上述內容就是vue-devtools調試工具怎么在VUE項目中安裝，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。