為Electron 安裝 vue-devtool等擴展

相關代碼:
https://github.com/WozHuang/Barrage-helper/blob/master/src/main/index.dev.js

在SPA逐漸成為構建優秀交互體驗應用的主流方式后，使用Electron開發跨平台的軟件是一個優秀的解決方案。下面簡單介紹一下 Electron-vue 安裝 vue-devtool的方式。

安裝步驟

1. 下載 vue-devtools.crx，把文件名后綴改成zip后解壓放在工程目錄下

（找不到或者懶得下可以直接克隆我的倉庫后把這個文件夾給復制出來，我已經解壓好放在里面了）

2. Electron-Vue中本來是應該預裝好了vue-devtool的，奈何 electron-devtools-installer 這個庫不知道有什么問題，只能自己手動裝了，部分代碼：

// Install `vue-devtools`
require('electron').app.on('ready', () => {

  // 注釋掉的這部分是 Electron-Vue 中預裝devtool的代碼，沒有用
  // let installExtension = require('electron-devtools-installer')
  // installExtension.default(installExtension.VUEJS_DEVTOOLS)
  //   .then(() => {})
  //   .catch(err => {
  //     console.log('Unable to install `vue-devtools`: \n', err)
  //   })

  // 新增的：安裝vue-devtools
  BrowserWindow.addDevToolsExtension(path.resolve(__dirname, '../../devTools/vue-devtools'));
  
});

除了vue-devtool，安裝其他的擴展也是同理，但是估計沒有什么用（Electron已經為瀏覽器放開很多限制不需要擴展了）

效果圖

最后，有興趣可以看下這個用 Electron-vue 做的小玩具：一個彈幕助手，主要功能有顯示並朗讀彈幕、背景色及透明度設置和窗口置頂。

參考

Electron文檔中關於DevTool