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. Windows（Win7）搭建RabbitMQ服务器

    首先安装Erlang环境,RabbitMQ的运行依赖于Erlang.可以在官网链接http://www.erlang.org/downloads 页面找到对应的开发环境安装包.例如64位Windows ...

  2. JQuery发送ajax请求时中文乱码

    先排除项目故障: 1.web.xml中是否配置了字符拦截器 <filter> <filter-name>encodingFilter</filter-name> & ...

  3. .Net Core 添加 Swagger 支持

    1. NuGet  中添加 Swashbuckle.AspNetCore 2.添加 Startup 信息 将 Swagger 生成器添加到 Startup.ConfigureServices 方法中的 ...

  4. Python 为什么要保留显式的 self ？

    花下猫语:前两天,我偶然在一个知识星球(刘欣老师的"码农翻身")里看到一篇主题,刘老师表示 Python 的类方法非要带个 self,而不像其它语言那样隐藏起来,这让人很不爽.我对 ...

  5. 深度学习论文翻译解析（五）：Siamese Neural Networks for One-shot Image Recognition

    论文标题:Siamese Neural Networks for One-shot Image Recognition 论文作者: Gregory Koch   Richard Zemel Rusla ...

  6. Sentinel Core流程分析

     上次介绍了Sentinel的基本概念,并在文章的最后介绍了基本的用法.这次将对用法中的主要流程和实现做说明,该部分主要涉及到源码中的sentinel-core模块. 1.token获取   如上为t ...

  7. Spring Data JPA 梳理 - 使用方法

    1.下载需要的包. 需要先 下载Spring Data JPA 的发布包(需要同时下载 Spring Data Commons 和 Spring Data JPA 两个发布包,Commons 是 Sp ...

  8. JVM 调优 - jstat

    Java命令学习系列(四)——jstat 2015-07-31 分类:Java 阅读(11041) 评论(1) 阿里大牛珍藏架构资料,点击链接免费获取 jstat(JVM Statistics Mon ...

  9. 基于 B/S 端构建的 3D 楼宇自控可视化监控

    前言 智慧楼宇和人们的生活息息相关,楼宇智能化程度的提高,会极大程度的改善人们的生活品质,在当前工业互联网大背景下受到很大关注.目前智慧楼宇可视化监控的主要优点包括: 智慧化 -- 智慧楼宇是一个生态 ...

  10. 在window里面安装ubuntu子系统并安装图形化界面

    一.开启windows子系统 1. 在win10设置里面开启开发人员选项 (设置-->更新安全--> 开发者选项  )选择开启 2.在控制面板里面开启windows子系统 (启用或关闭wi ...