Visual Studio2017 中建立Electron项目并开启Electron调试

最新推荐文章于 2025-07-18 11:43:40 发布
最新推荐文章于 2025-07-18 11:43:40 发布
阅读量5.6k 收藏 8
点赞数 3
CC 4.0 BY-SA版权
分类专栏： Electron 文章标签： Node.js Electron vs2017
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/oh_futrue/article/details/90763371
本文介绍了如何在Visual Studio 2017中安装Node.js组件并集成Electron进行开发。通过安装cnpm以加快Electron的下载速度，然后配置package.json，接着在VS中设置Electron调试环境，包括Node.exe路径和选项，以及附加到Webkit进程进行调试。最后，解决win.loadFile()导致的问题，用win.loadURL()加载index.html。

Visual Studio 作为微软吃老本的优秀的IDE，自然继承了现在越来越火的Node.js

作为强迫症 安装了一个IDE后再也不想安任何别的东西，所以今天试着用VS2017集成Electron进行开发。

一.安装vs的Node.js组件

1.先在VS安装Node.js组件

2.新建一个Node.js的空白项目，

vs已经创建好了项目结构，

 

到了这里，已经可以进行Node.js开发了，接下来要集成Electron

 

最低0.47元/天 解锁文章

200万优质内容无限畅学
Electron开发桌面应用(2)：VSCODE调试Electron项目
ruyulin的博客
12-24 2万+
目的编写目的主要记录vscode如何调试electron项目。环境： nodejs 8.9.3 mpm 5.5.1 electron 1.7.10 vscode 1.19.1 具体步骤1.使用vscode打开electron项目2.点击debug 添加配置3.点击“添加配置”：4.打开launch.json点击右下角的添加配置，添加“electron 主”5.填配置完毕，修改launch.json
Node.js在VS2017中开发桌面程序代码
12-28
Node.js在VS2017开发工具中进行开发桌面程序代码，该处是示例代码，请安装VS2017，并且必须安装 node.js web开发包。
Electron项目的创建并启动
最新发布
zeifer001的博客
07-18 405
本文介绍了搭建Electron开发环境的关键步骤。首先需安装Node.js，然后通过npm初始化项目并安装Electron依赖。由于安装过程较慢，建议切换至淘宝镜像源加速下载。文章详细说明了镜像源的切换命令，并推荐使用electron-vite脚手架快速搭建项目框架。在项目创建过程中，可能需要设置Electron镜像源来加速依赖安装。最后，通过npm run dev命令即可启动开发环境。全文提供了完整的Electron开发环境配置流程，包括依赖安装和镜像源配置等实用技巧。
Electron 桌面应用开发从基础到进阶
郊眠寺
03-16 4102
本文介绍了一些 Electron 的进阶知识，包括使用主进程和渲染进程、使用模块、使用开发工具、调试、部署和热更新。通过掌握这些知识，你可以更好地管理和开发 Electron 应用程序，提高开发效率，为用户提供更好的体验。为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。
Electron + VS2017环境创建运行调试基本应用程序
qq_36651243的博客
04-28 903
环境部署 1.VS2017必须安装Node.js组件 2.用VS2017创建一个空白Node.js项目 3.VS2017集成Electron 找到项目工程中的npm，右键点击选择安装新的npm包 通过搜索找到electron安装包安装 安装后会在界面上显示已安装，同时package.json会新增electron信息 4.配置VS使用Electron运行调试js代码 右键点击项目工程，选择属性 将electron.exe所在目录配置到Node.exe路径中 .\node_modules\elect
使用Visual Studio Code调试Electron
kissLife的博客
07-06 1068
使用Visual Studio Code调试Electron
用苹果笔记本用visual studio code 工具打包electron项目的步骤和终端指令
04-25
好的，我现在需要帮助用户解决在MacBook上使用Visual Studio Code打包Electron项目的步骤和终端指令。用户之前已经询问过类似的问题，我之前给出了使用Electron Forge的详细步骤，现在用户再次提问，可能希望得到更...
Visual Studio和Visual Studio Code之间有什么区别
10-15
Visual Studio和Visual Studio Code是两种不同的开发工具，虽然它们都由微软公司开发并用于软件开发，但它们在设计理念、功能特性和使用场景上存在显著差异。 首先，Visual Studio（VS）是一个全面的集成开发环境...
obs-studio-node：用于Node.Js，Electron和类似工具的libOBS（OBS Studio）
01-30
（可能与Visual Studio 2017安装程序一起安装） 示例构建 我们使用灵活的cmake脚本，使其尽可能广泛和通用，以防止需要针对自定义用途不断管理cmake脚本，同时还提供了合理的默认值。 它遵循标准的cmake布局，您...
Visual Studio Code调试Electron 的ui
09-24
Visual Studio Code是一款强大的代码编辑器，对于 Electron 应用程序的调试支持非常全面。如果你想在 VSCode 中调试 Electron UI (用户界面)，可以按照以下步骤操作： 1. 安装插件：首先，安装 `Debugger for ...
vscode 调试electron代码
SimpleForest的博客
06-30 1445
原文地址：https://electronjs.org/docs/tutorial/debugging-main-process-vscode，有问题最好查看官网文档 １．在代码根目录，添加 .vscode/lanuch.json，内容如下： { "version": "0.2.0", "configurations": [ { "name": "Debug Ma...
electron-studio:使用电子构建跨平台桌面应用
05-13
电子工作室 使用电子构建跨平台桌面应用
vs2015 html5开发教程,vs2015中electron开发入门 01
weixin_39819974的博客
06-05 259
安装vs2015插件[node.js Tools]1.在vs工具->扩展更新,查找node关键字，找到如图 2.下载安装插件创建项目1.文件->新建项目->Blank Node.js web Application 2.项目创建完成后，在项目根目录添加main.js文件(这段代码是网上抄写的，已经不记得那篇博客了，非常抱歉，感谢原作者注释的如此详细)var app = requi...
VSCode创建 electron 项目
bigblack12321的博客
10-31 2032
VSCode创建 electron 项目vue+vite项目
db2v9/9.5高级应用开发_Electron 7.0.0发布，跨平台桌面应用开发工具
weixin_39792049的博客
11-21 158
Electron 7.0.0 稳定版正式发布了，Electron 是 GitHub 开发的跨平台桌面应用开发工具，支持使用 Web 技术开发桌面应用，其基于 C++ 开发，GUI 核心来自于 Chromium，而 JavaScript 引擎使用 V8。此片更新内容如下：Notable ChangesElectron 的核心组件是 Chromium、Node.js 与 V8，按照国际惯例它...
vs2015中electron开发入门 - 参考资料
chibu9204的博客
06-04 282
electron 官网 https://electron.atom.io/ electron 中文文档 https://wizardforcel.gitbooks.io/electron-doc/content/tutorial/supported-platforms.html ...
electron 01 编译 （vs2017 windows10)
一朵花开的时间
07-22 2097
01 环境 按照官网说明 http://electronjs.org/docs/development/build-instructions-windows 需要安装 Visual Studio 2017 Python 2.7 Node.js Git 如果编译libchromiumcontent，要下载chromium源码。需要vpn。参考 https://blo...
实现 Visual Studio Code（简称 VS Code）的 Electron 通信机制
AxCybersecurity的博客
09-21 325
Electron 提供了多种通信机制，其中最常用的是主进程和渲染进程之间的 IPC（进程间通信）。主进程是应用程序的主要进程，负责管理窗口、处理系统级别的操作等。渲染进程是运行在窗口中的 Web 页面，负责显示用户界面和处理与界面相关的操作。通过以上代码，我们可以在 Electron 的主进程和渲染进程之间实现简单的通信。下面我们将分别介绍如何在主进程和渲染进程中实现 Electron 的通信机制。在上述代码中，第一个参数表示消息的名称，第二个参数表示要传递的数据。方法来监听来自渲染进程的消息。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值