Electron入门 Hello world 完整实现流程（附配置）（vue-cli）

最新推荐文章于 2024-07-30 18:56:40 发布

这个需求建议不做

最新推荐文章于 2024-07-30 18:56:40 发布

阅读量471

点赞数

分类专栏： electron vue vue-cli 文章标签： Electron JavaScript开发-其它杂项仿window桌面仿window窗口系统界面 javascript

本文链接：https://blog.csdn.net/weixin_39729729/article/details/107329401

版权

vue 同时被 3 个专栏收录

8 篇文章 0 订阅

订阅专栏

electron

3 篇文章 0 订阅

订阅专栏

vue-cli

2 篇文章 0 订阅

订阅专栏

示例仅 Windows 系统下运行，其他系统可参考

某个项目需要提供一个桌面应用，选取 Electron 作为技术框架
目前使用广泛的除了 Electron 外还有 nw.js，国内也有使用 nw.js 开发的桌面应用，如微信小程序开发工具
但是 nw.js 的教程实在难找，加上国内环境所限，转而弃坑选择 Electron

Electron & nw.js 粗略对比

对比项	Electron	nw.js
平台兼容性	win7+	winXP(低版本)、win7+
配置难易	main.js 配置	package.json 配置
框架支持	集成 vue-cli	-
npm 支持	npm / yarn …	-
打包方式	npm 命令打包	复制文件 -> 运行nw.exe / 命令打包
打包大小	156Mb左右	150Mb左右
首次安装时间（实际使用）	5min	>7-8h ……
学习成本	需掌握 node.js webpack 等前端基础技术，对初学者不甚友好，>=中级可无视	较Electron稍低，不需要掌握 webpack
维护	维护中	维护中
社区活跃度	活跃	国外未知国内……

以上对比信息仅为本人首次使用这两个框架的体验，每个人遇到的情况不同，不作为任何项目的参考依据

准备工作

必需 node.js npm 不用提

由于众所周知的原因，首先配置国内镜像

// 淘宝镜像
npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist
npm config set electron_mirror https://npm.taobao.org/mirrors/electron/
// 华为镜像
npm config set registry https://mirrors.huaweicloud.com/repository/npm/
npm config set disturl https://mirrors.huaweicloud.com/nodejs/
npm config set electron_mirror https://mirrors.huaweicloud.com/electron/

安装 Electron

npm 全局安装

npm install electron -g

全局安装好就可以开开心心的使用 Electron 了

是的！快乐就是这么简单！

不要着急，还有一些事情需要做

// 全局安装 Electron 打包工具，后面生产需要它
npm install electron-packager -g
// 局部安装 Electron 用以解决 process 报错问题
npm install electron --save-dev

Vue 支持

当然现在很多小伙伴钟爱 Vue
而 Electron 完美支持了 vue-cli 构建项目的方式

// 全局安装 vue-cli
npm install -g vue-cli
// 构建项目
vue init simulatedgreg/electron-vue project-name

配置

项目构建好之后，老规矩写个 Hello world 来试试

首先是配置 package.json
考虑到程序员都比较懒，就直接上代码了

{
  "name": "project-name",
  "main": "src/main.js",
  "version": "1.0.1",
  "scripts": {
    "build": "electron-packager . project-name"
  },
  "build": {
    "productName": "project-name",
    "appId": "com.example.yourapp",
    "directories": {
      "output": "build"
    },
    "files": [
      "dist/electron*"
    ],
    "dmg": {
      "contents": [
        {
          "x": 410,
          "y": 150,
          "type": "link",
          "path": "/Applications"
        },
        {
          "x": 130,
          "y": 150,
          "type": "file"
        }
      ]
    },
    "mac": {},
    "win": {},
    "linux": {}
  },
  "devDependencies": {
    "electron": "^9.1.0"
  }
}

必要文件

要想启动项目还缺少 html 和 js 文件
按照 vue 项目习惯，在根目录下创建 src 文件夹，里面放 main.js 和 index.html

src/main.js
main.js 作为 Electron 项目的入口文件必不可少，启动路径在 package.json 配置

const electron = require('electron');

const {
  app, // 控制应用生命周期的模块
  BrowserWindow, // 创建原生浏览器窗口的模块
} = electron;

// 浏览器窗口配置
const windowConfig = {
  width: 600,
  height: 800,
  minWidth: 600,
  minHeight: 800,
  webPreferences: {
    javascript: true,
    plugins: true,
    nodeIntegration: true, // 是否集成 Nodejs
    webSecurity: false,
  }
};


// 保持一个对于 window 对象的全局引用，如果不这样做，
// 当 JavaScript 对象被垃圾回收， window 会被自动地关闭
let mainWindow;

function createWindow() {
  // 创建浏览器窗口。
  mainWindow = new BrowserWindow(windowConfig);

  // 加载应用的 index.html。
  // 这里使用的是 file 协议，加载当前目录下的 index.html 文件。
  // 也可以使用 http 协议，如 mainWindow.loadURL('http://nodejh.com')。
  mainWindow.loadURL(`file://${__dirname}/index.html`);

  // 启用开发工具。
  mainWindow.webContents.openDevTools();

  // 当 window 被关闭，这个事件会被触发。
  mainWindow.on('closed', () => {
    // 取消引用 window 对象，如果你的应用支持多窗口的话，
    // 通常会把多个 window 对象存放在一个数组里面，
    // 与此同时，你应该删除相应的元素。
    mainWindow = null;
  });
}

// Electron 会在初始化后并准备
// 创建浏览器窗口时，调用这个函数。
// 部分 API 在 ready 事件触发后才能使用。
app.on('ready', createWindow);

// 当全部窗口关闭时退出。
app.on('window-all-closed', () => {
  // 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
  // 否则绝大部分应用及其菜单栏会保持激活。
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  // 在 macOS 上，当点击 dock 图标并且该应用没有打开的窗口时，
  // 绝大部分应用会重新创建一个窗口。
  if (mainWindow === null) {
    createWindow();
  }
});

src/index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>IES</title>
</head>

<body>

  <h1>Hello World!</h1>
  We are using Node.js
  <span id="version-node" class="version"></span>
  and Electron
  <span id="version-electron" class="version"></span>

  <script type="text/javascript">
    console.log('process: ', process);
    var versionNode = process.version;
    var versionElectron = process.versions['electron'];
    document.getElementById('version-node').innerText = versionNode
    document.getElementById('version-electron').innerText = versionElectron
  </script>
</body>

</html>

跑起来！

直接运行

electron .

这时候会看到一个窗口在桌面上弹出，里面默认开启了 Chrome 调试窗口，生产的时候可以在 main.js 里把开发工具那项注释掉，也可以在调用 build 命令时 webpack 取消这一项（Electron 的优势体现出来了）
在这里插入图片描述

打包 / 生产

剩下的就是产出了

// 执行
electron-packager . project-name

// 示例 package.json 已经配置了 build，所以使用 vue 打包方式
npm run build

打包出来后可以看到根目录下生成了一个名为 project-name-win32-x64 的文件夹，这个就是产出的应用
点击里面的 .exe 文件可以看到刚刚生成 Hello world 与开发版无异

无意中又肝了一篇博，明天给自己加个鸡腿

这个需求建议不做

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录