Vue+Electron: 环境搭建

一. 创建Vue项目

打开终端使用Vue-CLI来创建一个Vue项目

选择所需要的依赖:

选择完各种配置后，等待项目创建完成即可：

二. 安装electron-builder依赖

安装electron-builder依赖很简单，只需要执行下面的代码即可

cd electron-vue
vue add electron-builder

Electron版本先选择9.0.0的，目前最新的版本是10.1.4，后面会进行升级

在这里有一个要注意的地方，Electron里面只支持VueRouter的hash模式，不支持history模式，可以使用下面代码来进行处理：

// src/router.(js|ts)
...
export default new Router({
-  mode: 'history',
+  mode: process.env.IS_ELECTRON ? 'hash' : 'history',
  ...
})
...

启动项目

可以用

yarn electron:serve

或者

npm run electron:serve

我们可以在Electron启动的窗口查看到项目情况，也可以通过浏览器查看，浏览器上查看和开发一般的Vue项目并没什么差别

构建项目

可以用

yarn electron:build

或者

npm run electron:build

打包的时候，先打包好Vue，放在dist_electron/bundled目录下；接下来需要从github上下载对应的electron资源，可能有点耗时，有可能因为网络超时失败，顺利的话在dist_electron目录就可以看到对饮平台的安装包了，在MacOs的是dmg后缀，在windows是exe后缀：

更新Electron版本

可以通过

yarn add electron@latest -D

yarn add electron-devtools-installer@latest -D

分别将electron和electron-devtools-installer更新到最新版本

恭喜，Vue+Electron的开发环境就搭建好了！！！