electron+vue项目安装vue-devtools插件

    这里记录一下自己安装过程中遇到的问题：

    1、首先需要安装vue-devtools，遇到了源码编译构建的时候的webpack,webpack-cli反复提示缺失的问题。

    这个问题很烦:

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

    这一步其实有个巨坑，官方的代码默认是dev分支，我们需要切换到master分支，才能顺利的进行build。切换分支需要在命令行下执行如下指令即可：

git checkout master

    截图如下： 

     

    如下文件系统显示所示默认分支没有shells目录，而这个目录下有chrome等目录，最后编译的结果就在这个目录下：

     

    切换到主分支，才会出现shells目录哦。 

     

    b  cd vue-devtools  npm install

    c  修改shells/chrome目录下的manifest.json，将如下的persistent的值由false->true

"background": {
    "scripts": [
      "build/background.js"
    ],
    "persistent": true
},

    d  npm run build

     这一步会出现前面提到的一个特别恶心的webpack,webpack-cli互相依赖缺失的问题，提示没有webpack模块，然后全局安装webpack模块，npm install -g webpack，这时候运行webpack指令，会发现缺失webpack-cli，再次全局安装webpack-cli，npm install -g webpack-cli，这时候运行webpack-cli指令，又莫名其妙的提示缺失webpack模块。

    原因就是webpack4.0的问题，解决办法就是安装指定版本的webpack：npm install -g [email protected]，而不是默认，默认会出现4以上版本，甚至5.1版本或者更高。

    但是有的系统如果以前全局安装过webpack，还是会报这些相互依赖的问题，或者是环境变量导致的webpack,webpack-cli安装进了node目录，而以前有的webpack安装进了C:\Users\Administrator\AppData\Roaming\npm这个目录。解决办法就是删除C:\Users\Administrator\AppData\Roaming\npm目录下的webpack。

    e 打开浏览器，进入更多程序->扩展程序，或者直接在浏览器上输入：chrome://extensions/进入，然后点击按钮“加载已解压的扩展程序”，选择vue-devtools/shells/chrome目录即可。这样，浏览器右上角会出现vue-devtools的图标。

    

    2、浏览器插件安装完成，普通的vue web项目可以在浏览器中出现vue-devtools插件，启动electron项目，还是不行，需要在代码中加入相关代码片段。

      在src/main/index.dev.js中加入代码：BrowserWindow.addDevToolsExtention("/path/to/vue-devtools/shells/chrome")，其中BrowserWindow我们通过require("electron")来引入，在on ready部分加入插件代码，如下所示：

    

    安装vue-devtools插件到chrome浏览器中，不一定需要通过源码编译安装，可以通过下载推荐的crx文件，下载地址：https://chrome.zzzmh.cn/info?token=nhdogjmejiglipccpnnnanhbledajbpd，这种crx文件的扩展程序，需要手动拖入到Chrome浏览器的扩展程序界面这里。

     最后，给出electron+vue项目启动之后，控制台的vue-devtools的样子：

    

    切换到Vue这个面板的样子：

     

    这篇文章其实很想写webpack,webpack-cli的依赖相互缺失的问题的，但是已经有人提出解决这个问题了，就是版本对应上就可以了，但是我的问题可能还复杂一些，他还涉及了一个npm全局默认安装的目录C:\Users\Administrator\AppData\Roaming\npm 中已经有了webpack老版本的问题。

   再就是vue-devtools如果通过源码编译还会遇上一个很恶心的版本问题，就是官方dev,master的问题，我们需要切换到master分支才能进行很好的构建。

    最后，如果是electron+Vue项目，还需要在代码中加入扩展插件的一句代码，但是涉及BrowserWindow引入的问题，所以严格来说是两句代码。