Electron学习第一天 ,启动项目

之前在安装官网的步骤操作,结果报错,找了好多办法,最后这种办法成功启动项目,并且没有报错,特此记录

特别提醒,最好安装淘宝镜像,npm 太慢,会导致报错问题,解决起来个人觉得比较麻烦

1 cnpm i electron -D (特别重要)

2 cnpm init

3 修改package.json 文件

复制代码
  "main": "main.js",// 这里必须是main.js
  "scripts": {
   "start": "electron .", //这个必须加
 },

4 根据官网配置main.js

复制代码
const { app, BrowserWindow } = require('electron')
const createWindow = () => {
    const win = new BrowserWindow({
      width: 800,
      height: 600
    })
  
    win.loadFile('index.html')
    win.webContents.openDevTools()  //打开调试窗口 
  }
  app.whenReady().then(() => {
    createWindow()
  })
  app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') app.quit()
  })

5 根据官网配置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'">
    <!-- 关闭安全警告 -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline';">
    <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>
</html>

6 cnmp run start

相关推荐
liyi_hz200810 小时前
O2OA (翱途)开发平台新版本发布预告:架构升级、性能跃迁、功能全面进化
android·java·javascript·开源软件
wanfeng_0910 小时前
python爬虫学习
爬虫·python·学习
angelQ10 小时前
前端fetch手动解析SSE消息体,字符串双引号去除不掉的问题定位
前端·javascript
林希_Rachel_傻希希10 小时前
JavaScript 解构赋值详解,一文通其意。
前端·javascript
林希_Rachel_傻希希11 小时前
正则表达式捕获组与全局匹配
前端·javascript
karshey11 小时前
【vue】NoticeBar:滚动通知栏组件手动实现(内容、速度、循环间隔可配置)
前端·javascript·vue.js
A9better11 小时前
嵌入式开发学习日志39——stm32之I2C总线物理层与常用术语
stm32·单片机·嵌入式硬件·学习
花菜会噎住11 小时前
Vue3 路由配置和使用与讲解(超级详细)
开发语言·javascript·ecmascript·路由·router
细节控菜鸡11 小时前
【2025最新】ArcGIS for JavaScript 快速实现热力图渲染
开发语言·javascript·arcgis
Dontla11 小时前
React惰性初始化函数(Lazy Initializer)(首次渲染时执行一次,只执行一次,应对昂贵初始化逻辑)(传入一个函数、传入函数)
前端·javascript·react.js