方法
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 环境.
先安装 electron
vue
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 启动)
我也在不断的学习和积累中,文章中有不足和误导的地方还请见谅,可以给我留言指正。希望和大家共同进步,共建和谐学习环境。