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. 略学扩展Eculid算法

    扩展 Euclid 算法 Euclid 算法 辗转相除法 计算两个数最大公因数 \(\text{gcd}(a,\,b) = \text{gcd}(b,\,a\%b)\) exEuclid 算法 裴蜀定 ...

  2. Centos7搭建Scrapy爬虫环境

    写在前面 因为之前的爬虫环境一直是部署在我自己本地的电脑上的,最近,写了一个监控别人空间的爬虫,需要一直线上24小时运行,所有就打算云服务器上部署环境,也捣鼓了好一会才弄好,还是有一些坑,这里先记录一 ...

  3. Java面向对象笔记（五分钟秒懂）

    面向对象概念 面向对象三大特征:封装,继承,多态 面向对象编程(OOP,Object Oriented Programing)是相对于面向过程编程说的,之前写的代码基本都是纯的面向过程编程的,当项目复 ...

  4. 【系统设计】分布式唯一ID生成方案总结

    目录 分布式系统中唯一ID生成方案 1. 唯一ID简介 2. 全局ID常见生成方案 2.1 UUID生成 2.2 数据库生成 2.3 Redis生成 2.4 利用zookeeper生成 2.5 雪花算 ...

  5. Oracle clob列union的方法（ORA-00932）

    今天在做“站内搜索”数据抽取时,为了能将多个相似的数据库表数据合并,使用了SQL中union关键字,期望将多个单独的SQL查询结果合并到一起.每个单独的SQL都能成功执行,在union合并的过程中遇到 ...

  6. 阿里云服务器ecs配置之安装redis服务

    一.介绍 Redis是当前比较热门的NOSQL系统之一,它是一个key-value存储系统.和Memcache类似,但很大程度补偿了Memcache的不足,它支持存储的value类型相对更多,包括st ...

  7. centos7 远程连接其他服务器mysql

    在本地远程连接 在终端输入: mysql -h 服务器ip地址 -P 端口 -u 用户名 -p 然后输入密码即可.

  8. Flask基础(04)-->相关配置参数

    # 导入Flask from flask import Flask from flask import config # 创建Flask的应用程序 app = Flask(__name__) #=== ...

  9. Bumblebee服务网关之统一请求验证

    对于微服务网关来说,统一请求验证是一个比较重要和常用的功能,通过网关验证后台服务就无须关注请求验证:对于多语言平台的服务而言制定验证方式和变更验证配置都是一件比较繁琐和工作量大的事情.Bumblebe ...

  10. 栈二：包含min函数的栈

    /** * 题目:包含min函数的栈 * 描述:  定义栈的数据结构,请在该类型中实现一个能够得到栈最小元素的min函数.  *  注:用data来保存数据,用另一个栈min保存依次入栈最小的数 *  ...