Electron 是什么

web技术：Electron 基于 Chromium 和 Node.js, 让你可以使用 HTML, CSS 和 JavaScript 构建应用。

开源：Electron 是一个由 GitHub 及众多贡献者组成的活跃社区共同维护的开源项目。

跨平台： Electron 兼容 Mac 、 Windows 和 Linux ，可以构建出三个平台的应用程序。

像网易云音乐，飞书等应用

实现第一个electron

初始化项目

  • 安装包
    npm init -y
  • 安装electron
    npm i electron -D

安装慢，用淘宝镜像

// 使用阿里定制的cnpm命令行工具代替默认的npm，输入以下代码
npm install -g cnpm --registry=http://registry.npmmirror.com
// 检查 cnpm -v

文件入口

  • main.js替代index.js
  • 修改package.json中的main
    "main": "main.js",
  • main.js写
    const { app, BrowserWindow } = require('electron')
    // 主进程
    const createWindow = () => {
      //窗口大小
      const win = new BrowserWindow({
        width: 800,
        height: 600
      })
    //引入本地文件  win.loadFile('./index.html')
    // 引入网页地址//win.loadURL('./index.html')
    }
    app.whenReady().then(createWindow)
  • 引入本地文件，在项目根目录下建index.html正常写即可
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <body>
      hello
    </body>
    </html>

保存自动刷新

//全局
npm install -g nodemon
// 局部
npm install -D nodemon
  • 修改package.json中的script运行脚本
  • –exec保存自启动
  • electron 空格加个点，意思是准备去运行electron
  • watch监听，–ext文件类型
    "scripts": {
       "start": "nodemon --exec electron . --watch ./ --ext .js,.html,.css,.vue"
     },

总结

Electron是由GitHub开发的一个开源、跨平台的、前端技术的桌面GUI应用程序开发框架

Electron是个使用浏览器做客户端软件的软件框架

简单实现一个electron，需要一个安装相应包，文件入口，网页引入等