1. 开发环境
  1. 创建开发目录（也是解决方案）
  • 执行初始化命令，创建electronpicture工程，并添加main.js和index.html文件
npm init
  1. 安装electron
npm install electron -dev
  • 如果安装失败，则可能需要将参数unsafe-perm设置为true
npm install electron --unsafe-perm=true
  • 如果网速较慢可以添加--verbose来显示下载速度
npm install --verbose electron
  • 如果最后一直装不上，可以直接下载Release进行开发

工程目录结构如下



4. 添加测试页面

index页面

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <p>This is test pag!</p>

</body>

</html>

main.js页面

const { app, BrowserWindow, ipcMain } = require('electron');

//const edge = require('electron-edge-js');

const path = require('path');

let win;

function createWindow() {

    win = new BrowserWindow({

        width: 800,

        height: 400

    }),

        win.loadFile(path.join(__dirname, 'index.html'));

        //打开页面调试功能

    win.webContents.openDevTools();

}

app.on('ready', createWindow)
  1. 配置启动调试
{

    // Use IntelliSense to learn about possible attributes.

    // Hover to view descriptions of existing attributes.

    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387

    "version": "0.2.0",

    "compounds": [{

        "name": "Electron",

        "configurations": [

            "Electron Main",

            "Electron Renderer"

        ]

    }],

    "configurations": [

        {

            "type": "node",

            "request": "launch",

            "name": "Electron Main",

            "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",

            "args": [

                "${workspaceRoot}/main.js",

                "--remote-debugging-port=9333" //Set debugging port for renderer process

            ],

            "protocol": "inspector" //Specify to use v8 inspector protocol

        },

        {

            "type": "node",

            "request": "attach",

            "name": "Electron Renderer",

            "protocol": "inspector",

            "port": 9333

        },

        {

            "type": "node",

            "request": "launch",

            "name": "Launch Program",

            "program": "${workspaceFolder}\\main.js"

        }

    ]

}

最终效果图

  • 至此一个工程项目就搭建完成了，可以调试主进程和渲染进程，熟悉页面调试的也可以使用页面（chrome）的调试功能，开关见代码注释。

electron开发环境搭建的更多相关文章

  1. 1、Window10 Electron 开发环境搭建

    1:首先安装nodejs C:\Users\yan>node -v v4.5.0 2:安装Electron C:\Users\yan>npm install --g electron-pr ...

  2. Window10 Electron 开发环境搭建及打包exe程序

    1.安装 Electron 首先要安装Node.js     (安装方法:https://www.cnblogs.com/inkwhite/p/9685520.html) 我这里已经安装好了. 2:安 ...

  3. python开发环境搭建

    虽然网上有很多python开发环境搭建的文章,不过重复造轮子还是要的,记录一下过程,方便自己以后配置,也方便正在学习中的同事配置他们的环境. 1.准备好安装包 1)上python官网下载python运 ...

  4. IntelliJ IDEA安装及jsp开发环境搭建

    一.前言 现在.net国内市场不怎么好,公司整个.net组技术转型,就个人来说还是更喜欢.net,毕竟不是什么公司都像微软一样财大气粗开发出VS这样的宇宙级IDE供开发者使用,双击sln即可打开项目, ...

  5. Qt for Android开发环境搭建及测试过程记录

    最近学习了Qt的QML编程技术,感觉相较于以前的QtGUI来说更方便一些,使用QML可以将界面与业务逻辑解耦,便于开发. QML支持跨平台,包括支持Android平台,因此可以使用Qt的QML进行An ...

  6. node.js之开发环境搭建

    一.安装linux系统 (已安装linux可跳此步骤) 虚拟机推荐选择:VirtualBox 或者 Vmware (专业版永久激活码:5A02H-AU243-TZJ49-GTC7K-3C61N) 我这 ...

  7. TODO：小程序开发环境搭建

    TODO:小程序开发环境搭建 1.第一步当然是要先注册小程序了 2.登录到小程序 a)完善小程序信息,如名称,图标,描述 3.绑定开发者 4.获取AppID,并设置服务器信息 5.下载并安装开发者工具 ...

  8. Eclipse中Python开发环境搭建

    Eclipse中Python开发环境搭建  目 录  1.背景介绍 2.Python安装 3.插件PyDev安装 4.测试Demo演示 一.背景介绍 Eclipse是一款基于Java的可扩展开发平台. ...

  9. Windows 10 IoT Serials 1 - 针对Minnow Board MAX的Windows 10 IoT开发环境搭建

    目前,微软针对Windows IoT计划支持的硬件包括树莓派2,Minnow Board MAX 和Galileo (Gen 1和Gen 2).其中,Galileo (Gen 1和Gen 2)运行的是 ...

随机推荐

  1. 【面试】足够“忽悠”面试官的『Spring事务管理器』源码阅读梳理（建议珍藏）

    PS:文章内容涉及源码,请耐心阅读. 理论实践,相辅相成 伟大领袖毛主席告诉我们实践出真知.这是无比正确的.但是也会很辛苦. 就像淘金一样,从大量沙子中淘出金子一定是一个无比艰辛的过程.但如果真能淘出 ...

  2. 无法将类型为“System.Xml.XmlComment”的对象强制转换为类型“System.Xml.XmlElement”

    今天开发C#项目时,有一个需要读取XML的功能点.编码过程中遇到了如标题所示的异常,如下图所示: 查询官网后得知XmlComment是注释节点的类型,如下图所示: 于是得出结论,使用XmlDocume ...

  3. Eclipse通过SVN导入项目遇到的问题记录

    问题一.把子项目导入为project 原因:一个大的文件夹,里面有各个小项目,需要把自己添加需求的醒目导入为Maven Project 1.右键选 Import as project 2.右键 -&g ...

  4. 洗牌Shuffle'm Up POJ-3087 模拟

    题目链接:Shuffle'm Up 题目大意 模拟纸牌的洗牌过程,已知两个牌数相等的牌堆.求解经过多少次洗牌的过程,使牌的顺序与目标顺序相同. 思路 直接模拟,主要是字符串的操作.问题是,如何判断出不 ...

  5. 自定义构建基于.net core 的基础镜像

    先说一个问题 首先记录一个问题,今天在用 Jenkins 构建项目的时候突然出现包源的错误: /usr/share/dotnet/sdk/2.2.104/NuGet.targets(114,5): e ...

  6. Redis数据库之服务器主从配置

    目的 主要培养对分布式REDIS主从复制架构运用的能力.理解并掌握REPLICATION工作原理的同时,能独立配置Replication ,使数据库运行在主从架格上.针对主从复制架构的运用,着力掌握S ...

  7. Python学习笔记整理总结【Django】：Model操作（二）

    1.操作汇总 # 增 # # models.Tb1.objects.create(c1='xx', c2='oo') 增加一条数据,可以接受字典类型数据 **kwargs # obj = models ...

  8. Centos 6下使用cmake编译安装MariaDB

    写在前面 最近在学习Maria DB,为了方便查阅,又为了将所学的知识重新的梳理,特作此随笔一篇,希望过后阅读时能有所感,也希望对大家能够有所帮助. 安装前的准备 大家都知道,在Linux上安装软件一 ...

  9. jQuery查找节点(选择器)

    jQuery通过选择器来完成节点的查找: 1.基本选择器: ①通用/所有的选择器:$("*") //使用*号来表示. ②:标签选择器:$("标签名(div)") ...

  10. 全网最新最简单的 OpenJDK13 代码编译

    目录 开始咯 1.下载源码 2.安装编译需要的依赖 3.安装 jdk 12 4.检查配置 5.开始编译 6.验证是否成功 回顾 个人博客原文:全网最新最简单的 OpenJDK13 代码编译 最近因写文 ...