Electron 5.x + Vue Cli 3.x + Vue 2.x + Vue CLI Plugin Electron Builder 构建桌面应用程序

Node 安装

Node.js 版本要求 12.0.0 以上,Electron 官方文档: https://electronjs.org/releases/stable 有明确指出。

Node.js 官网:https://nodejs.org/en/
Node.js 中文网:http://nodejs.cn/

Yarn 安装

Electron 官方推荐 yarn 作为软件包管理器。

Yarn 官网:https://yarnpkg.com/
Yarn 中文网:https://yarn.bootcss.com/
Yarn Github地址:https://github.com/yarnpkg/yarn

@vue/cli 安装

@vue/cli 安装命令,更多细节看 Vue CLI

yarn global add @vue/cli

查看版本

本次演示已安装好的工具


1.png

创建一个项目

更多细节看 Vue CLI

vue create demo  // demo 项目名称

耐心等待完成


2.png

成功后可在对应的电脑盘看到项目文件,可通过以下命令把项目跑起来:

yarn serve

放上演示截图

3.png
4.png

Electron 安装

首先,我们需要借助 Vue CLI Plugin Electron Builder,更多细节请看文档。
运行以下命令安装并调用vue-cli-plugin-electron-builder的生成器:

vue add electron-builder

中间会有让你选择Electron Version,选择最新的5.0.0即可,以下是成功后的截图。

5.png

可以看到项目结构

6.png

package.json 比起vue-cli 2.x真的简洁太多了

7.png

启动开发服务器

yarn electron:serve
image.png

Electron 一个桌面应用程序成功运行起来了,可以尽情地开发了。

image.png

打包命令

yarn electron:build

最后

第一次在简书上发表文章,如有不足之处,请多多指教!
后续会继续分享 Electron 使用过程中遇到的各种问题的解决经验。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容