如何创建一个electron应用

pikaqiu420

已于 2024-09-02 11:41:02 修改

阅读量185

点赞数 5

文章标签： electron arcgis javascript

于 2024-09-02 11:37:46 首次发布

本文链接：https://blog.csdn.net/pikaqiu420/article/details/141814887

版权

方式一:使用Electron Forge

npx是npm里面集成的一个东西,npx运行一个可执行文件,运行完后会删除,npm执行完之后会存在本地

npm的方式
npm init electron-app <name>
npx create-electron-app <name>
yarn的方式
yarn create electron-app <name>

方式二:手动安装依赖配置

1.创建一个文件夹并命名,如:myelectron.(最好在一个没有中文的目录下创建)

初始化项目

npm init
yarn init

2.安装依赖

npm install electron --save-dev
yarn add electron --dev

//如果下载失败,可以尝试更换npm镜像地址或yarn为最新的镜像地址,
//1. 修改镜像（npm config set registry https://registry.npmmirror.com）(yarn config set registry https://registry.npmmirror.com)
//2. 清理缓存（npm cache clean -f）
//或者使用cnpm进行下载
//npm install cnpm -g
//cnpm install electron --save-dev

3.创建主页面: index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
  <title>Document</title>
</head>
<body>
  <h1>Hello Electron</h1>
</body>
</html>

4.创建项目入口文件: main.js

const {app, BrowserWindow,ipcMain} = require ('electron');
const path = require('path')   //node的path模块
//创建一个窗口加载目标文件
function createWindow () {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true, //允许在渲染进程中使用Node.js模块
            //preload: path.join(__dirname, 'preload.js')  //预加载脚本,如果使用在此处配置
    })
    win.loadFile('src/index.html')
}

// 监听:当electon完成初始化时,创建一个新窗口
app.on('ready',createWindow)

// 监听:当所有窗口关闭时,退出应用
app.on('window-all-closed', function () {
    if (process.platform!== 'darwin') {
        app.quit()
    }
})

5.修改package.json文件里的入口文件的路径

{
  "name": "electron-hello",
  "version": "1.0.0",
  "description": "",
  "main": "src/index.js",
  "scripts": {
    "start":"electron ."
  },
  "author": "yl",
  "license": "ISC",
  "devDependencies": {
    "electron": "^32.0.1"
  }
}

6.启动应用:npm run start

pikaqiu420

关注

5
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何创建一个electron应用

npx是npm里面集成的一个东西,npx运行一个可执行文件,运行完后会删除,npm执行完之后会存在本地。1.创建一个文件夹并命名,如:myelectron.(最好在一个没有中文的目录下创建)5.修改package.json文件里的入口文件的路径。方式一:使用Electron Forge。6.启动应用:npm run start。3.创建主页面: index.html。4.创建项目入口文件: main.js。方式二:手动安装依赖配置。
复制链接

扫一扫