关于前端:electron开发简单应用程序

Electron 简介

官网：https://www.electronjs.org/
Electron 是一个基于 Chromium 和 Node.js，
能够应用 HTML、CSS 和 JavaScript 构建跨平台利用的技术框架，
兼容 Mac、Windows 和 Linux。

官网疾速启动示例：

• 克隆示例我的项目的仓库

  git clone https://github.com/electron/electron-quick-start

• 进入仓库

  cd electron-quick-start

• 装置依赖并运行

  npm install && npm start

Electron 应用 Vue 开发步骤

创立 Vue 我的项目

1. vue create electron-demo
2. 装置 electronvue add electron-builder
   呈现配置项后抉择 11.0.0
   ? Choose Electron Version (Use arrow keys)
   ^11.0.0
   ^12.0.0
   ^13.0.0
3. 运行我的项目
   npm run electron:serve
   启动可能会期待很久，呈现以下信息：

   这是因为在申请装置 vuejs devtools 插件。须要迷信上网能力装置胜利。
   如果不能迷信上网也没关系，急躁期待 5 次申请失败后会主动跳过。
   当初就能应用在 electron 中开发了

4. 配置 Vue
5. 我的项目配置批改 background.js
   批改 APP 窗口大小：

   勾销跨域限度：

   勾销菜单栏：
   在 windows 中，菜单栏在 APP 窗口内的顶部；
   在 macOS 中，菜单栏位于电脑屏幕顶部。
   因为 macOS 的特殊性，顶部菜单栏无奈删除，
   所以咱们针对 macOS 非凡解决，
   把菜单栏只保留“对于”和“退出”。

6. 我的项目打包，生成可执行文件
   npm run electron:build

生成的文件夹及文件

Electron 开发过程可能遇到的问题

如何配置 node 应用环境

1. 须要在 background.js 中开启 node
2. 在 window 中挂载 node 模块
3. 打包的一些配置信息

分享一个我开发的桌面工具

Git 地址：https://github.com/Lin-Jiaxia…
因为 npm install 可能会遇到 electron 下载失败的问题，须要应用 cnpm install electron

运行：npm run electron:serve

编译：npm run electron:build

波及到的技术栈 Vue、node、electron

打包工具：electron-builder

• 性能点：

  1. 按固定格局上传 txt 文件，在桌面生成相应的 MP3 文件
  2. 利用于企业微信审批单格局，将销假、加班申请单增加至工具，
     在桌面生成一个每页最多搁置 6 个审批单的 pdf