首页 > 其他分享 >如何创建高版本的electron桌面客户端项目?

如何创建高版本的electron桌面客户端项目?

时间:2023-03-23 17:37:39浏览次数:46  
标签:vue const process js electron 桌面 data 客户端

简介

由于之前创建electron项目时都是使用vue add electron-builder来让vue集成electron的,但是最高只支持到electron13.0,对于想要继承electron高版本的项目则不太支持,因此本文将介绍如何在vue项目中集成高版本electron

搭建环境

整体环境与如何创建electron-vue项目 中基本一致

步骤

使用vue-cli创建项目

如何创建electron-vue项目 中使用vue-cli创建项目一致。

安装electron组件

cnpm install electron -D
cnpm install electron-builder -D

electron必须文件:

main.js:

主程序,负责控制您应用的生命周期、显示原生界面、执行特殊操作并管理渲染器进程 (renderer processes)。需要在package.json中指定main的位置,示例如下:
image
main.js的路径是相对于packages.json的路径,我这便是同级目录。

const { app, BrowserWindow } = require('electron');
const path = require('path');

const winURL = path.join(__dirname, 'index.html')
const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
  });

  win.loadFile(winURL);
};

app.whenReady().then(() => {
  createWindow();

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow();
    }
  });
});

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

index.html

用于electron加载vue打包后的index.html,和main.js中的win.loadFile('index.html')对应,需要注意路径,此处我放置在与main.js同级目录。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'self'; script-src 'self'"
    />
    <meta
      http-equiv="X-Content-Security-Policy"
      content="default-src 'self'; script-src 'self'"
    />
    <title>Hello from Electron renderer!</title>
  </head>
  <body>
    <h1>Hello from Electron renderer!</h1>
    <p>

标签:vue,const,process,js,electron,桌面,data,客户端
From: https://www.cnblogs.com/xy-bot/p/17248244.html

相关文章