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