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. 【linux】【sonarqube】安装sonarqube7.9

    前言 SonarQube 是一款用于代码质量管理的开源工具,它主要用于管理源代码的质量. 通过插件形式,可以支持众多计算机语言,比如 java, C#, go,C/C++, PL/SQL, Cobol ...

  2. Python 爬虫监控女神的QQ空间新的说说,实现邮箱发送

    主要实现的功能就是:监控女神的 QQ空间,一旦女神发布新的说说,你的邮箱马上就会收到说说内容,是不是想了解一下 先看看代码运行效果图: PS:只有你有一台云服务器你就可以把程序24h运行起来 直接上代 ...

  3. Spring 梳理-@Controller

    @Controller是一个构造性注解(stereotype),它基于@Component 在自动扫描中,组件扫描器会自动将@Controller申明的类注册为Spring应用上下文的一个bean 可 ...

  4. 使用 .gitignore 忽略 Git 仓库中的文件

    .gitignore 在Git中,很多时候你只想将代码提交到仓库,而不是将当前文件目录下的文件全部提交到Git仓库中,例如在MacOS系统下面的.DS_Store文件,或者是Xocde的操作记录,又或 ...

  5. idea 自动生成并跳转单元测试

    在要测试的类上按快捷键ctrl + shift + t,选择Create New Test,在出现的对话框的下面member内勾选要测试的方法,点击ok 或者点击菜单栏Navigate–>tes ...

  6. 05-padding

    padding padding:内边距,内容到边框的距离 而且,padding是有背景颜色的.background-color属性将填充所有border以内的区域(不包括border) padding ...

  7. [LeetCode] 1108. Defanging an IP Address

    Description Given a valid (IPv4) IP address, return a defanged version of that IP address. A defange ...

  8. Activity初学乍练

    1.Activity的概念与Activity的生命周期图: 注意事项: onPause()和onStop()被调用的前提是: 打开了一个新的Activity!而前者是旧Activity还可见的状态:后 ...

  9. 刷新：重新发现.NET与未来

    微软在比尔·盖茨手中创立并崛起, 成为PC互联网时代的霸主,很多70,80后都有MVP Ediwang的体验: 当时的微软对我来说就是神的存在.因为我认识电脑到使用电脑的一切几乎都离不开这家伟大的公司 ...

  10. Spring Security 学习记录

    一.核心拦截器详细说明 1.WebAsyncManagerIntegrationFilter 根据请求封装获取WebAsyncManager 从WebAsyncManager获取/注册Security ...