天天看點

Chrome浏覽器及electron-vue項目添加vue-devtools插件的方法步驟

Step 1:Chrome浏覽器添加vue-devtools插件

① 下載下傳vue-devtools源碼壓縮包:https://github.com/vuejs/vue-devtools

Chrome浏覽器及electron-vue項目添加vue-devtools插件的方法步驟

② 浏覽器位址欄輸入

chrome:version

轉到關于版本,檢視“個人資料路徑”(浏覽器配置檔案的存放位置),将zip中的vue-devtools-dev檔案夾解壓到該路徑下

③ Git Bash進入vue-devtools-dev工程目錄,安裝依賴:

安裝完成後編譯程式:

$ npm run build
           

編譯成功後,在目錄\vue-devtools-dev\shells\chrome\下找到manifest.json檔案,将

"persistent": false

改為

"persistent": true

Chrome浏覽器及electron-vue項目添加vue-devtools插件的方法步驟

④ 浏覽器位址欄輸入

chrome://extensions

轉到擴充程式,啟用“開發者模式”,點選“加載已解壓的擴充程式”按鈕,選擇目錄\vue-devtools-dev\shells\下的chrome檔案夾,插件添加成功!

Chrome浏覽器及electron-vue項目添加vue-devtools插件的方法步驟

Step 2:electron-vue項目添加vue-devtools插件

① 在項目目錄\ev-demo\src\main\下找到index.dev.js檔案,添加2行代碼:

BrowserWindow.addDevToolsExtension('C:/Users/89693/AppData/Local/Google/Chrome/User Data/Default/vue-devtools-dev/shells/chrome')
// chrome檔案夾所在的完整路徑位址
           
Chrome浏覽器及electron-vue項目添加vue-devtools插件的方法步驟

② 運作項目,控制台出現Vue标簽,即可使用vue-devtools啦!

Chrome浏覽器及electron-vue項目添加vue-devtools插件的方法步驟

以上。

繼續閱讀