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

相关推荐
烛阴5 分钟前
【TS 设计模式完全指南】用工厂方法模式打造你的“对象生产线”
javascript·设计模式·typescript
定栓8 分钟前
Typescript入门-类型断言讲解
前端·javascript·typescript
xiaominlaopodaren16 分钟前
“UI里就可以请求数据库”,让你陌生的 React 特性
前端·javascript·react.js
薛定谔的算法18 分钟前
JavaScript数组操作完全指南:从基础到高级
前端·javascript·算法
KFCcrazy420 分钟前
嵌入式学习日记(39)51单片机
嵌入式硬件·学习·51单片机
用户221520442780024 分钟前
Promise实例方法和async、await语法糖
前端·javascript
MuMuMu#32 分钟前
JAVA NIO学习笔记基础强化学习总结
java·学习·nio
lingggggaaaa38 分钟前
小迪安全v2023学习笔记(七十九讲)—— 中间件安全&IIS&Apache&Tomcat&Nginx&CVE
笔记·学习·安全·web安全·网络安全·中间件·apache
我登哥MVP39 分钟前
Java File 类学习笔记
java·笔记·学习
前端开发爱好者1 小时前
下一代全栈框架:Deno + Vite 的结合体!
前端·javascript·后端