Electron + vue搭建项目

Electron + vue搭建项目

搭建方法

查阅了很多资料，我总结了以下几种方式进行“融合”。（以前部分内容来自https://juejin.cn/post/7234057613775339577）

• 1、electron-quick-start + vue
• 2、vue cli + electron
• 3、vue-electron
• 4、quasar + electron
• 5、vue-cli + vue-cli-plugin-electron-builder

一、electron-quick-start + vuecli

在electron官网中提供一个快速创建electron 项目的模板 electron-quick-start

electron-quick-start

• 1、clone 模板到本地
• 2、使用npm install安装包（electron安装缓慢，后续更新教程）
• 3、使用npm run start 就可以启动项目，测试是否安装成功

4、使用vue-cli创建一个vue项目，然后打包到dist 目录下
5、修改main.js中加载页面的路径 mainWindow.loadFile(‘dist/index.html’)

二、vue cli + electron

这个方法和第一个方法其实很相似，就是将第一种方法反过来用

• 1、使用vue cli 创建一个vue 项目
• 2、使用 npm install --save-dev electron electron-packager安装包
• 3、在根目录中添加一个render.js
• 4、修改package.json 的入口 main: “render.js”
• 5、添加启动命令 “electron:serve”: “vue-cli-service electron:serve”
• 6、在render.js 中加载路径改为 mainWindow.loadURL(“http://localhost:8080”)

三、vue-electron

• 1、首先需要安装npm install -g vue-cli,如果你已经安装了vue-cli3.0+，请使用npm install -g @vue/cli-init拉取旧模板
• 2、使用vue init simulatedgreg/electron-vue my-project，配置好相关信息
• electron-vue文档
• 很好用但是不是很推荐，库维护时间是两年前了，而electron更新太快了，很多api已经废弃了。

• 3、cd my-project 进入到项目
• 4、yarn 安装包
• 5、 yarn run dev 启动项目

四、quasar + electron

这个方法使用的是quasar框架

• 1、npm install -g @quasar/cli 安装quasar脚手架
• 2、quasar create <folder_name> 创建一个工程
• 3、quasar mode add electron添加electron 模式
• 4、quasar build -m electron 打包

五、vue-cli + vue-cli-plugin-electron-builder

这个方法使用的是vue-cli 框架和 electron-builder

elector-builder官网

• 1、使用vue cli 创建一个vue 项目 vue create project
• 2、创建好项目，执行 vue add electron-builder，项目自动生成为electron项目
• 3、这里我选择最新版本，13

• 4、使用npm run electron:serve 就可以启动项目
• 5、效果

electron文档