【electron跨平台开发02】IDEA 配置electron开发环境

最新推荐文章于 2025-06-09 09:31:28 发布
最新推荐文章于 2025-06-09 09:31:28 发布
阅读量8.4k 收藏 14
点赞数 4
CC 4.0 BY-SA版权
分类专栏： Electron
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/applek_Case/article/details/86554206
本文介绍了如何在IDEA中配置Electron开发环境，包括使用外部工具运行项目、直接配置运行按钮以及设置智能提示。详细步骤包括设置JavaScript版本、添加外部工具、安装Node.js插件、配置运行配置和添加JavaScript库。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

IDEA是一款集成开发环境，软件支持几乎所有的编程语言。electron基于nodejs，理论上来说，只要支持JavaScript的IDE都可以开发electron程序，不过我接触的编程语言比较多，IDEA可以满足全部开发需求，懒得用各种各样的开发工具了，一个就好。

首先保证你安装了nodejs环境，和下载了electron。不知道怎么安装可以看https://www.lovestu.com/electron01.html

electron使用的是ES6语法，需要在设置中修改语法

找到设置菜单，选择language & Frameworks

修改JavaScript的版本
在这里插入图片描述

运行项目

IDEA使用外部工具运行electron

这个方法不需要安装插件，不过点击的时候有点麻烦

创建你的项目，创建好以后，打开菜单-File->Settings->Tools->External Tools
images
添加一个外部工具，Name是显示的工具名称随便写，Description是描述，随便写

program是程序，输入electron.cmd【windows下需要输入.cmd，苹果系统和linux系统不需要输入】

Argument是参数，输入.表示当前目录

Working directory是工作空间，为当前目录，直接使用变量

最低0.47元/天 解锁文章

200万优质内容无限畅学
01.electron-(创建项目)
做技术，坚持才是最重要的，一时的热情只是暂时的进步
04-03 1590
克隆仓库创建 electron 项目 git clone https://github.com/electron/electron-quick-start cd electron-quick-start npm install && npm start 使用 electron-forge 搭建 electron 项目 npx create-electron-app 项目名 cd 项目名 npm start 手动创建 electron 项目 主进程main.js const { app, Br
探索未来：Electron IDE——新一代Web版Arduino IDE
gitblog_00678的博客
09-25 995
探索未来：Electron IDE——新一代Web版Arduino IDE 项目介绍 Electron IDE是一款全新的基于Web的Arduino集成开发环境（IDE），它并非官方Arduino项目的附属产品。尽管目前仍处于早期开发阶段，但已经具备了基本的编译和编辑功能，并支持部分库的管理。Electron IDE的目标是为Arduino开发者提供一个更加现代化、灵活且易于使用的开发工具。 项目...
Electron基础教程：构建跨平台桌面应用
最新发布
weixin_29025501的博客
06-09 1014
Electron是一个使用Web技术构建桌面应用的框架，它允许开发者使用JavaScript、HTML和CSS构建跨平台的应用程序。由GitHub开发，它背后的机制是通过Chromium和Node.js来提供用户界面和后端功能。Electron提供了灵活的API来自定义窗口的样式和行为。例如，可以更改窗口的标题栏样式，设置窗口的背景色，或者添加自定义的菜单栏。自定义窗口样式：// 设置无边框窗口样式（注意安全问题）添加自定义菜单栏：label: '应用',submenu: [
【Electron】开发环境搭建
bug制造者
06-11 2763
1、安装node ①、node.js下载链接http://nodejs.cn/download/ 选择适合自己电脑系统的安装包，比如win7 64位系统，那么选择下图红框中的 ②、安装完成以后在cmd里运行 node -v检测安装是否成功。  如图，安装成功之后应该如图所示，其中v4.4.3，是你安装的node.js的版本号2、安装Electron ①、打开cmd，在里面输入 方式一：（直接访问国...
基于electron开发自己的IDE 之 玩转electron-vue
ctbinzi的专栏
04-22 1540
打算开发一个JavaScriptIDE，后续开发课程及课程讲解的时候方便使用 这个IDE项目打算用electron进行开发，UI部分用vue配合element-ui，代码编辑器部分ace 或者CodeMirror，具体还有待确认 本篇先走通一下electron-vue的项目构建，这些都是基于node.js的，所以先安装node.js 国内网络环境不佳，建议安装cnpm，方便后续安装npm包 npm i cnpm -g 然后安装vue脚手架 cnpm i vue-cli 安装创建elect.
Electron的代码调试
weixin_34319640的博客
04-09 763
刚接触Electron，尝试调试程序时，竟无从下手，所以把这个过程做了下记录 参考工程 根据Electron的官方文档：使用 VSCode 进行主进程调试:https://electronjs.org/docs/tutorial/debugging-main-process-vscode 下载相应的github工程：github.com/octref/vscode-electron-debug/...
创建Electron项目
01-10 751
1：执行npm init 命令，生成package.json { "name": "my-electron-app", "version": "1.0.0", "description": "Hello World!", "main": "index.js", "author": "Jane Doe", "license": "MIT", "scripts": { "start": "electron ." }, "devDependencies": {
Vue+electron-vue跨平台桌面应用开发实战教程（一）
程序客栈
11-02 2255
Vue+electron-vue跨平台桌面应用开发实战教程（一）前言创建项目1.快速安装Vue项目2.集成electron3.运行程序 前言 本文将带领大家使用Vue + electron-builder 搭建桌面应用。 使用到的工具：IDEA 2021、node 创建项目 1.快速安装Vue项目 通过Ctrl/Command+alt+S快捷键打开idea的 Settings（设置）页面，在左侧目录 Plugins（插件）中搜索 Vue。博主这边已经安装过，未安装的小伙伴可以点击Install ，为以后创
【跨平台开发：IDEA MySQL技巧探讨全解析】：跨平台开发技巧分享
本章将深入介绍IDEA和MySQL在跨平台开发中的重要性以及相关技巧。 IDEA是一款由JetBrains开发的强大集成开发环境，为开发人员提供了丰富的功能和插件，可大大提升开发效率。MySQL则是一种流行的开源关系型数据库...
基于Electron开发跨平台插件与扩展
## 第一章：Electron框架简介 ...- **跨平台支持**：Electron可以将应用程序打包成在多个操作系统上运行的可执行文件，大大降低了开发多个平台的成本和工作量。 - **Web技术栈**：Electron使用Web技术
跨平台MDK开发：在不同操作系统中配置构建环境的指南（跨平台开发攻略）
本文全面介绍了跨平台MDK开发的各个方面，从基础理论到实际操作再到高级应用，详细探讨了跨平台开发的核心技术、MDK开发环境配置、实际操作中的问题解决及性能优化，并且展望了跨平台开发的未来趋势。文章强调了在...
ProjectPal：使用Electron制作的CodingProgramming项目经理和Idea Generator
02-06
使用Electron制作的桌面应用程序可轻松管理和跟踪项目构想。 产品特点 -使用Firebase进行用户身份验证注册和登录 -用户友好的界面 -内置了我之前的项目codePal中的想法生成器。 ，具有能够将生成的想法提交到您的个人项目列表的附加功能。 -能够轻松地存储和管理用于编码和/或其他方式的项目构想。 通过本地存储实现数据一致性
使用PhpStorm或WebStorm作为electron IDE
weixin_33882452的博客
11-05 1128
最近在研究electron，考虑到以前一直用PhpStorm做开发，而且electron就是基于nodejs的，因此很自然的想到要继续用PhpStorm做IDE。 开发 打开Run/Debug Configurations窗口，添加一个Node.js配置： 然后配置Node Interpreter参数，对于windows系统，配置为项目目录下的node_modules.bin\electron.c...
Electron 在 Taro IDE 的开发实践
凹凸实验室
04-08 2565
背景 Taro IDE 是一款我们正在精心打造的一站式移动端研发工作台。除了需要实现 Taro 从创建项目到预览、编译的全部能力，还需要打通用户测试、调试、监控等一系列流程。为了提升开发体验，仅仅一个命令行工具是远远不够的，我们需要开发一款桌面客户端，并同时提供 Windows、MacOS 等不同系统的版本。 Electron 最初是 Github 为 Atom 编辑器开发的桌面应用框架。Elec...
全网最全搭建Electron项目的各种方式及错误解决
u011296285的博客
04-23 7660
如果你只是想体验下electron，或者测试一些官方文档中示例代码，则可以选择方式一、二创建项目。如果想要打包功能开箱即用，并且不包含过多的其他依赖，那么选择方式四、方式五搭建是最好的。reactvuevitewebpackpiniavue-router等。方式三(官方脚手架)不太推荐，由于大陆网络原因，经常会遇到依赖安装失败，和打包失败的问题，当然，如果你有梯子那就无所谓了。
【electron】如何快速进行electron项目开发（包含了各种创建一个electron项目的方法）
kinghzking的专栏
10-29 2812
之前一直用的element-elment-admin对应的electron工程。于是找了各种方案去尝试，尝试结果太过曲折，记录一下，踩大家未踩的坑。下面列举了一些不错的electron框架项目，直接下载使用，事半功倍。原理是克隆git，然后把template目录定制一下。当你的包管理器发出警告时，请注意升级你的 Node 版本。create-electron（推荐）create-electron（推荐）各种electron项目初始化方案。各种electron项目初始化方案。官网手把手教你创建一个项目。
Electron Fiddle: 快速上手Electron的开发工具
gitblog_00156的博客
11-28 474
Electron Fiddle: 快速上手Electron的开发工具 Electron Fiddle 是一个开源项目，旨在让开发者能够轻松地开始使用 Electron 框架进行开发。该项目主要使用 TypeScript 和 JavaScript 编程语言。 项目基础介绍 Electron Fiddle 是一个在线的Electron实验沙盒，它允许开发者不安装任何依赖就尝试Electron框架。开发...
第03课：Electron 桌面应用开发
一个被知识诅咒的人
09-22 2741
开发一款功能完整的桌面应用，通常不会使用记事本去完成所有的开发工作，核心的开发工作一般会在 IDE（集成开发环境，Integrated Development Environment）中完成。由于 Electron 应用主要使用 Web 技术（HTML、CSS 和 JavaScript）开发，因此只要支持编辑 JavaScript、HTML、CSS 代码的 IDE，都可以开发 Electron 应...
Electron: 1、从零开始写一个记事本app
xuguangyuansh的博客
05-14 5523
Electron: 从零开始写一个记事本app Electron介绍        原文版权属于 简书 的 鳗驼螺，这里只是做了重现，并记录到自己的日记中。   &nbsp
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值