创建第一个electron项目

安装

  • 创建package.json

    npm init

  • 创建electron

    npm install --save-dev electron

  • 创建程序主入口文件 main.js,electron分为主进程和渲染进程,main,js也可以理解为electron项目的主进程,在主进程中是node环境不可以写操作dom方法,在渲染进程中是浏览器环境 可以写操作dom的一些方法

  • 使用nodemon快速启动项目

    npm install -g nodemon

  • package.json文件里面的配置 我这里的版本是28,后续博客关于electron的项目也是这个版本

    {
    "name": "my-electron-app",
    "version": "1.0.0",
    "description": "Hello World!",
    "main": "main.js",
    "author": "Jane Doe",
    "license": "MIT",
    "scripts": {
    "start": "nodemon --exec electron ."
    },
    "devDependencies": {
    "electron": "^28.1.0"
    }
    }

  • main.js 基本配置

    //BrowserWindow 窗口模块
    const { app, BrowserWindow } = require("electron");
    const path = require("path");
    const createWindow = () => {
    // Create the browser window.
    const mainWindow = new BrowserWindow({
    width: 600,
    height: 600,
    webPreferences: {
    preload: path.join(__dirname, "preload.js"),
    },
    frame: false, //隐藏标题栏
    });
    //每次启动弹出调试框
    mainWindow.webContents.toggleDevTools();
    // 加载页面文件
    mainWindow.loadFile(path.resolve(__dirname, "index.html"));
    // 加载外部链接
    // mainWindow.loadURL('https://www.bilibili.com/video/BV1XA411m7Rz?p=7&vd_source=3f2d70e03f43eedd302d3543ad8099b2')
    // 打开开发工具
    // mainWindow.webContents.openDevTools()
    };

  1. 在main.js 中加载了index.html页面,也可以使用在线的url,为了方便开发进行调试可以使用mainWindow.webContents.openDevTools()这个方法打开调试器 这样就不用每次手动去点开了

index页面配置

复制代码
<!--index.html-->

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>你好!</title>
</head>

<body>
    <h1>1121asdasdasdasd 3!</h1>
    我们正在使用 Node.js <span id="node-version"></span>, Chromium <span id="chrome-version"></span>, 和 Electron <span id="electron-version"></span>.

    <!-- 您也可以此进程中运行其他文件 -->
  	        <script src="./renderer.js"></script>
</body>

</html>

启动项目

复制代码
npm start
相关推荐
江城开朗的豌豆3 分钟前
在写vue公用组件的时候,怎么提高可配置性
前端·javascript·vue.js
江城开朗的豌豆4 分钟前
Vue路由跳转的N种姿势,总有一种适合你!
前端·javascript·vue.js
江城开朗的豌豆4 分钟前
Vue路由玩法大揭秘:三种路由模式你Pick谁?
前端·javascript·vue.js
江城开朗的豌豆5 分钟前
Vue路由守卫全攻略:给页面访问装上'安检门'
前端·javascript·vue.js
小磊哥er12 分钟前
【前端工程化】前端组件模版构建那些事
前端
前端 贾公子12 分钟前
monorepo + Turborepo --- 开发应用程序
java·前端·javascript
江城开朗的豌豆17 分钟前
Vue路由传参避坑指南:params和query的那些猫腻
前端·javascript·vue.js
十里青山25 分钟前
超好用的vue图片预览插件更新啦,hevue-img-preview 7.0.0版本正式发布,支持vue2/vue3/移动/pc,增加缩略图、下载、自定义样式等
前端·javascript·vue.js
lichenyang45334 分钟前
css模块化以及rem布局
前端·javascript·css
小熊哥^--^35 分钟前
条件渲染 v-show与v-if
前端