Electron 创建项目

前言

项目 创建 electron 项目，参考官网的文档来，我也只是入门 哈哈哈

官网

https://electronjs.p2hp.com/docs/latest/tutorial/tutorial-first-app

1. 创建一个文件夹

electron-app

然后 cd electron-app 这个目录下

npm init

然后加上 

  "start": "electron .",

这句命令

 

2. 然后安装

npm install electron --save-dev

然后 发现安装不了 那么就是要用到 淘宝镜像了

搜索解决方案如下：

npm install -g cnpm --registry=https://registry.npm.taobao.org

  npm install -g cnpm --registry=https://registry.npmmirror.com 

  推荐下面那个安装

cnpm install electron --save-dev

使用cnpm 就可以安装了

 得到了这目录就OK了 

3. 创建文件

main.js 

复制代码
// electron 模块可以用来控制应用的生命周期和创建原生浏览窗口
// const { app, BrowserWindow } = require('electron')
const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
const path = require('path')

const createWindow = () => {
  // 创建浏览窗口
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  // 加载 index.html
  mainWindow.loadFile('index.html')

  // 打开开发工具
  // mainWindow.webContents.openDevTools()
}

// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    // 在 macOS 系统内, 如果没有已开启的应用窗口
    // 点击托盘图标时通常会重新创建一个新窗口
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

// 除了 macOS 外，当所有窗口都被关闭的时候退出程序。 因此, 通常
// 对应用程序和它们的菜单栏来说应该时刻保持激活状态, 
// 直到用户使用 Cmd + Q 明确退出
app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') app.quit()
  })
复制代码

index.html

 

复制代码
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>你好!</title>
  </head>
  <body>
    <h1>你好!</h1>
    我们正在使用 Node.js <span id="node-version"></span>,
    Chromium <span id="chrome-version"></span>,
    和 Electron <span id="electron-version"></span>.
  </body>
  <!-- <script src="./renderer.js"></script> -->
</html>
复制代码

然后是新版的

preload .js
复制代码
// 所有的 Node.js API接口 都可以在 preload 进程中被调用.
// 它拥有与Chrome扩展一样的沙盒。
window.addEventListener('DOMContentLoaded', () => {
    const replaceText = (selector, text) => {
      const element = document.getElementById(selector)
      if (element) element.innerText = text
    }
  
    for (const dependency of ['chrome', 'node', 'electron']) {
      replaceText(`${dependency}-version`, process.versions[dependency])
    }
  })
复制代码

然后就可以再 运行

npm start

就可以看到这个界面了

 

OK  后续 Keeping

 

posted @   -鹿-  阅读(86)  评论(0)  编辑  收藏  举报
相关博文：
· electron （electron-forge ）细节
· electron 启动加载动画效果
· 简单创建一个electron项目
· 一，创建一个electron应用程序
· electron初探
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· SQL Server 2025 AI相关能力初探
· 单线程的Redis速度为什么快？
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
点击右上角即可分享
微信分享提示
AI IDE Trae