VUE 配置vue-devtools調試工具

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 文件下，調試工具無效。