Electron学习第一天，启动项目

已于 2023-12-16 16:44:39 修改 · 814 阅读

文章标签：

#electron #学习 #javascript

于 2023-12-16 15:55:34 首次发布

本文讲述了在安装Electron项目时遇到错误，通过使用淘宝镜像和正确配置npm、main.js以及package.json来解决过程，特别强调了npm速度问题和main.js的配置重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前在安装官网的步骤操作，结果报错，找了好多办法，最后这种办法成功启动项目，并且没有报错，特此记录
特别提醒，最好安装淘宝镜像，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