Vue electron零基础使用教程

需求：给vue项目加一个外壳（electron），顾名思义也就是使用electron应用程序运行vue项目，直接将写好上线的vue项目在线地址放入electron程序中即可

操作步骤：

1、构建：构建应用程序首先要先安装electron相关依赖包以及搭建框架。在这里就不详细赘述了，直接上官网看文档https://www.electronjs.org/zh/docs/latest/tutorial/quick-start

2、打包：此时就到了重要的时候，官方指定的是使用脚手架打包-----Electron Forge

https://www.electronforge.io/

首先安装Electron Forge

使用npm

npm install --save-dev @electron-forge/cli

npx electron-forge import

✔ Checking your system

✔ Initializing Git Repository

✔ Writing modified package.json file

✔ Installing dependencies

✔ Writing modified package.json file

✔ Fixing .gitignore

We have ATTEMPTED to convert your app to be in a format that electron-forge understands.

Thanks for using "electron-forge"!!!

使用yarn

yarn add --dev @electron-forge/cli

npx electron-forge import

✔ Checking your system

✔ Initializing Git Repository

✔ Writing modified package.json file

✔ Installing dependencies

✔ Writing modified package.json file

✔ Fixing .gitignore

We have ATTEMPTED to convert your app to be in a format that electron-forge understands.

Thanks for using "electron-forge"!!!

其次使用make命令来创建可分发的应用程序，官方文档也说的很清楚

3、最后直接赋上具体代码

icon为我所创建应用程序图标，out为输出目录，其打包所有配置均在main.js中进行

展示main.js,个别需注意：

–url为vue项目在线地址

–mainWindow为所创建应用程序打开的弹框

–BrowserWindow为官方api具体操作看这里https://www.electronjs.org/zh/docs/latest/api/browser-window

–图中还自定义了打开应用程序窗口顶部菜单，虽然最后没有使用，但是有需要的也可以打开注释

4、最后就是生成的应用程序的配置信息修改–package.json

在package.json中的config中添加如下代码：

即forge下的packagerConfig中含有版本，名字，创作人，图标等配置信息

5、当然打包electron程序有很多种方法，比如：

electron-packager

electron-builder

Electron-Forge脚手架

Electron-Vue脚手架

等等，选择适合自己项目需求的才是最实用的。

到此这篇关于Vue electron零基础使用教程的文章就介绍到这了,更多相关Vue electron内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！