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. [Optimized Python] 17 - Performance bottle-neck

    前言 对于一门编程语言,没接触到“优化”和“库代码”的源码理解程度,不足以谈“掌握”二字. 本篇的学习笔记,同时也意味着自己终于触及到了Python的junior国际水准.(joke) 要学的东西有很 ...

  2. ActiveMQ JMX使用

    一.说明 ActiveMQ使用过程中,可以使用自带的控制台进行相关的操作以及查看,但是当队列数相当多的时候,在查询以及整体的监控上,就可能相当的不便.所以可通过JMX的方式,进行MQ中队列相关指标的以 ...

  3. Elasticsearch(10) --- 内置分词器、中文分词器

    Elasticsearch(10) --- 内置分词器.中文分词器 这篇博客主要讲:分词器概念.ES内置分词器.ES中文分词器. 一.分词器概念 1.Analysis 和 Analyzer Analy ...

  4. Java基础之final、static关键字

    一.前言 关于这两个关键字,应该是在开发工作中比较常见的,使用频率上来说也比较高.接口中.常量.静态方法等等.但是,使用频繁却不代表一定是能够清晰明白的了解,能说出个子丑演卯来.下面,对这两个关键字的 ...

  5. C# https证书通信Post/Get（解决做ssl通道时遇到“请求被中止: 未能创建 SSL/TLS 安全通道”问题）

    public static string HttpPost(string url, string param = null) { HttpWebRequest request; //如果是发送HTTP ...

  6. c#通过Redis实现轻量级消息组件

    最近在开发一个轻量级ASP.NET MVC开发框架,需要加入日志记录,邮件发送,短信发送等功能,为了保持模块的独立性,所以需要通过消息通信的方式进行处理,为了保持框架在部署,使用,二次开发过程中的简易 ...

  7. zookeeper特性与节点说明

    一.zookeeper概要.背景及作用 zookeeper产生背景: 项目从单体到分布式转变之后,将会产生多个节点之间协同的问题.如: 每天的定时任务由谁哪个节点来执行? RPC调用时的服务发现? 如 ...

  8. ajax 请求前后处理

    1. 介绍 通过 jQuery 提供的 ajaxSetup 方法,我们可以拦截页面上所有的 Ajax 请求响应(包括 $.ajax.$.post.$.get).这样我们可以对这些 Ajax 请求响应做 ...

  9. P5369 [PKUSC2018]最大前缀和

    状态压缩 P5369 题意:求所有排列下的最大前缀和之和 一步转化: 求最大前缀和的前缀由数集S组成的方案数, 统计答案时直接乘上sum(S)即可 考虑最大前缀和的性质: 设最大前缀和为sum[i] ...

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

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