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