使用electron-vue来开发一个桌面应用程序

简单介绍：

   要开发桌面应用程序（跨平台应用），现在最火的无非就是nw(node-webkit的缩写)和electron了，但是nw最近好像并没有以前那么突出，而electron却有很多的成功案例 比如：前端开发编辑器最火的vscode和atom都是使用electron开发的，而我在这里用的electron-vue是vue和electron的结合版，里面包含vue-cli中几乎所有的模块功能 比如：vuex、vue-router、axios等，都可以直接编译使用，更爽的是而且还是热加载。

electron-vue的安装

 注意事项:在下载的过程中会让选择打包方式（package和build），推荐使用package方式
  cnpm install -g vue-cli
  vue init simulatedgreg/electron-vue electronvue(electronvue是项目名称)
  cd electronvue
  yarn install  (根据官方文档推荐使用yarn来下载electron-vue的依赖)
  yarn run dev 或者npm run dev

打包成exe文件:

 yarn run build（打包全部平台的包）
 yarn run build:win32（打包指定平台的包）

问题处理

报错提示：process is not defined
解决办法：在.electron-vue/webpack.renderer.config.js和.electron-vue/webpack.web.config.js文件中找到HtmlWebpackPlugin方法添加下面代码

      templateParameters(compilation, assets, options) {
        return {
          compilation: compilation,
          webpack: compilation.getStats().toJson(),
          webpackConfig: compilation.options,
          htmlWebpackPlugin: {
            files: assets,
            options: options
          },
          process
         }
       }

内置的一些方法：

1. 打开调试控制台的方法,可以使用快捷键（ctrl+shift+i）,也可以使用代码控制：

// src/main/index.js
function createWindow () {
  mainWindow = new BrowserWindow({
    height: 563,
    useContentSize: true,
    width: 1000
  })
  mainWindow.loadURL(winURL)
  // mainWindow.webContents.openDevTools这个方法可以控制调试控制台 mode可选性，里面的值决定控制台的显示位置
  mainWindow.webContents.openDevTools({mode:'detach'})
  mainWindow.on('closed', () => {
    mainWindow = null
  })
}

/**
参数说明
		mode: 'left'  左边
		mode: 'right'  右边
		mode: 'bottom' 下边
		mode: 'top' 上边
		mode: 'detach' 脱离开发窗口
***/