vue+electron搭建项目

方法

1、electron-quick-start + vue

2、vue cli + electron

3、vue-electron

4、quasar + electron

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

6、脚手架electro-forge

7、手动创建

逐一说明补充:

一、electron-quick-start + vue

在electron官网中提供一个快速创建electron 项目的模板（文章第二节 创建electron项目并启动_hongc93的博客-CSDN博客_electron 启动）有详细介绍

二、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(我常用的)

默认有 node 环境.

先安装 electronvue vue-cli ，因为 electron-vue 中有内置 webpack ，无需再装一个独立的 webpack 。

npm install -g electron

npm install -g vue

npm install -g vue-cli

克隆模板项目（https://github.com/SimulatedGREG/electron-vue）

git clone https://github.com/SimulatedGREG/electron-vue.git

使用vue init simulatedgreg/electron-vue my-project，配置好相关信息

vue init simulatedgreg/electron-vue my-electron

 

之后进入目录并安装依赖 运行

cd my-electron

npm install

npm run dev

what?install时报错

别急 配置下淘宝镜像搞定

npm config set electron_mirror “https://npm.taobao.org/mirrors/electron/”

 再进行install

注意：运行时报错：

electron Object.fromEntries is not a function at Object.eval

（1）：看提示的文件是哪个，例如我的是node_modules下webpack-hot-middleware 下client.js
需要把有使用Object.fromEntries 这个方法的直接注释，或者删除掉即可。
（2）：也可以直接全局查询Object.fromEntries 它去寻找，当然前提是可以搜索到

 

四、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 框架
1、使用vue cli 创建一个vue 项目 vue create project
2、创建好项目，使用vue ui 添加插件 vue-cli-plugin-electron-builder，项目自动生成为electron项目
3、使用npm run electron:serve 就可以启动项目

六、脚手架electro-forge(第二节 创建electron项目并启动_hongc93的博客-CSDN博客_electron 启动)

七、手动创建

(第二节 创建electron项目并启动_hongc93的博客-CSDN博客_electron 启动)

我也在不断的学习和积累中，文章中有不足和误导的地方还请见谅，可以给我留言指正。希望和大家共同进步，共建和谐学习环境。