如何创建一个初始的Electron项目？

最新推荐文章于 2024-11-08 11:24:56 发布

Enlaipersistent

最新推荐文章于 2024-11-08 11:24:56 发布

阅读量269

点赞数 3

文章标签： electron javascript 前端

本文链接：https://blog.csdn.net/m0_62744746/article/details/140584416

版权

1.需要使用到的内容：node.js(版本v16.20.0)，vscode代码编辑器；

Node 历史版本下载

Index of /download/release/v16.20.2/

2.在盘中创建项目文件（建议，文件名不要出现中文）；

3.管理员模式启动终端

4.执行构建electron 命令：举例跳出界面选择 vue /no ts开发/ yes 代理

npm create @quick-start/electron@1.0.16 easychat-front

5.执行安装npm

npm install

6.运行

npm run dev

7.运行结果

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Enlaipersistent

关注关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

electron vite react 创建一个项目

读心悦

07-01

324

你可以使用 Vite 的开发服务器来启动你的 React 应用，并在 Electron 中加载它。但是，请注意，由于 Electron 使用了 Node.js 的环境，你可能需要一些额外的步骤来确保 Vite 的开发服务器和 Electron 可以正常工作。当你的应用开发完成后，你可以使用 Vite 构建生产版本，并使用 Electron 打包工具（如 electron-builder 或 electron-packager）来打包你的应用。这些组件将构成你的 Electron 应用的用户界面。

第十一章：Electron-Vue创建项目

2401_84434954的博客

04-27

998

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】})开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】[外链图片转存中…(img-hlEdgwfB-1714199063501)]

参与评论您还未登录，请先登录后发表或查看评论

【electron】electron项目创建的方式：

SunPeng的博客

08-12

1385

【electron】electron项目创建的方式：

基于vite-electron快速搭建electron项目

weixin_51080551的博客

06-19

235

快速搭建electron项目

【electron】如何快速进行electron项目开发（包含了各种创建一个electron项目的方法）

kinghzking的专栏

10-29

2651

之前一直用的element-elment-admin对应的electron工程。于是找了各种方案去尝试，尝试结果太过曲折，记录一下，踩大家未踩的坑。下面列举了一些不错的electron框架项目，直接下载使用，事半功倍。原理是克隆git，然后把template目录定制一下。当你的包管理器发出警告时，请注意升级你的 Node 版本。create-electron（推荐）create-electron（推荐）各种electron项目初始化方案。各种electron项目初始化方案。官网手把手教你创建一个项目。

electron打包dist为可执行程序后记【electron-quick-start】

GreenBark

04-17

1636

甲方爹：BS=>CS？我方领导：OJBK。项目是普普通通的vue项目，要求封装成arm64的Linux可执行程序。提示：以下是本篇文章正文内容，下面案例可供参考总的流程走下来挺顺利的，坑不算多。我方领导：😊。甲方爹：退出应用的时候能不能加个确认框？确认退出应用后电脑关机...。我方领导：OJBK。

全网最全搭建Electron项目的各种方式及错误解决

u011296285的博客

04-23

3853

如果你只是想体验下electron，或者测试一些官方文档中示例代码，则可以选择方式一、二创建项目。如果想要打包功能开箱即用，并且不包含过多的其他依赖，那么选择方式四、方式五搭建是最好的。reactvuevitewebpackpiniavue-router等。方式三(官方脚手架)不太推荐，由于大陆网络原因，经常会遇到依赖安装失败，和打包失败的问题，当然，如果你有梯子那就无所谓了。

electron学习：初始化electron项目

weixin_44005989的博客

01-14

1071

1.node环境，初始化项目 npm init -y 2.安装electron (注意：不要使用npm 安装，使用cnpm安装！！！原因：npm源是国外的超级慢......) cnpm install electron --save-dev 3.新建 main.js const {app, BrowserWindow} = require('electron'); let win; function createWindow() { // 创建浏览器窗口。 win = new Bro.

创建第一个electron项目

chenyidong521的博客

11-27

2734

必要文件package.json main.js 页面文件packagepackage文件中主要放的是项目的配置{ "name" : "your-app", "version" : "0.1.0", "main" : "main.js"//指定启动文件 }mainconst {app, BrowserWindow} = require('electron') const

如何配置Electron开发环境，并初始化创建一个跨平台记事本应用的项目？请提供详细步骤。

10-26

4. 创建Electron项目：使用Electron-forge初始化新项目，可以通过执行 'electron-forge init notepad' 命令，按照提示设置项目的基本信息。这里以 'notepad' 作为示例项目名称，并将项目存放在H:\Electron目录下。 ...

Electron - 跨平台桌面应用开发工具的使用总结

m0_37728716的博客

05-16

767

width: 80,frame: false, // 透明窗口transparent: true, // 透明窗口backgroundColor: '#00000000', // 透明窗口autoHideMenuBar: true, // 透明窗口})

快速创建 electron + vue 项目（也可创建 react 项目）

LRF200307的博客

10-23

315

这样一个简单的 electron + vue 的项目就创建完成了，然后就可以开始你的开发了，开发流程根正常的 vue 项目一致，快去试试吧，希望对大家有帮助。跟着提示，首先会让你选择语言，这里选择 vue 即可，如果需要其他语言自行选择下载即可。有可能出现 electron 下载不超过，可以通过切换镜像源或更改网络后重新下载尝试。可使用命令行快速创建，打开 cmd 命令窗口。依赖下载完，直接使用命令运行项目即可。创建成功后下载依赖，切换到相应目录。都可以选否，看个人所需。第一个为是否选择ts。

electron基础使用

m0_62475892的博客

06-11

1412

代码签名是一种可用于证明桌面应用程序是由已知来源创建的安全技术。Windows 和 macOS 拥有其特定的代码签名系统，这将使用户难以下载或启动未签名的应用程序。代码签名在。

创建一个electron-vite项目

m0_71231013的博客

03-18

1291

然后进入目录，下载包文件，运行项目到以上步骤，你已经成功运行起来一个 electron项目。拓展知识：接下来我们可以给他删除不必要的文件，添加ui组件库，添加router管理，添加axios请求。

Electron实战之环境搭建

xiangzhihong8的专栏

02-22

2564

工欲善其事必先利其器，在进行实战开发的时候，我们最终的步骤是搞好一个舒服的开发环境，目前支持 Vue 的 Electron 工程化工具主要有 electron-vue、Vue CLI Plugin Electron Builder、electron-vite。接下来我们将分别介绍基于 Vue CLI Plugin Electron Builder 和 electron-vite 的开发环境搭建。

半个前端新手入门Electron的过程

王谷雨的博客

02-01

332

本文描述了笔者学习 Electron 并捣鼓出一个小工具的过程。

创建electron项目的三种方式

陌子曦的专栏

01-07

1465

前期准备，已经安装npm，node请忽略 1. Mac 升级node 到最新版本 https://blog.csdn.net/ssjdoudou/article/details/106175320 2. Mac 安装cnpm sudo npm install -g cnpm --registry=https://registry.npm.taobao.org 3. Mac 安装electron sudo cnpm install -g electron 4. 查看版本号。 electron

初识Electron & 进程通信

共勉

11-06

983

本文详细介绍了Electron的初始化和进程通信机制，重点探讨了Electron框架的核心构成、主进程与渲染进程的职责及其通信方式。通过分析Electron如何结合Chromium和Node.js实现跨平台桌面应用开发，本文揭示了Electron在现代开发中的广泛应用和技术优势。此外，文章还涵盖了Electron的进程模型、上下文隔离、以及预加载脚本等技术细节，旨在帮助开发者更好地理解和应用Electron进行高效的桌面应用开发。

Electron + Vue3 开发桌面应用+附源码

最新发布

m0_47483157的博客

11-08

502

Electron 是一个使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用程序的框架。它由 GitHub 开发并维护，允许开发者使用现代 Web 技术创建原生应用程序。Electron 结合了 Chromium 渲染引擎和 Node.js 运行时环境，使得开发者可以在同一个项目中同时利用前端和后端的技术栈。Electron 主要特点跨平台：一次编写，可在 Windows、macOS 和 Linux 上运行。

创建一个electron项目

08-31

当然，我可以帮你创建一个 Electron 项目！请按照以下步骤操作： 1. 确保你已经安装了 Node.js。你可以在终端中运行 `node -v` 来检查是否已经安装。 2. 打开一个空白文件夹，进入该文件夹目录。 3. 在终端中运行以下命令来初始化一个新的 Node.js 项目： ``` npm init -y ``` 4. 接下来，安装 Electron 依赖： ``` npm install electron ``` 5. 创建一个名为 `main.js` 的文件，并将以下代码复制到其中： ```javascript const { app, BrowserWindow } = require('electron') function createWindow () { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }) win.loadFile('index.html') } app.whenReady().then(() => { createWindow() app.on('activate', function () { if (BrowserWindow.getAllWindows().length === 0) createWindow() }) }) app.on('window-all-closed', function () { if (process.platform !== 'darwin') app.quit() }) ``` 6. 创建一个名为 `index.html` 的文件，并将以下代码复制到其中： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello Electron!</title> </head> <body> <h1>Hello Electron!</h1> </body> </html> ``` 7. 在 `package.json` 文件中的 `"scripts"` 部分添加以下命令： ```json "start": "electron ." ``` 8. 最后，在终端中运行以下命令启动 Electron 应用程序： ``` npm start ``` 这样就完成了 Electron 项目的创建。你将会看到一个 Electron 窗口弹出，其中显示 "Hello Electron!"。你可以在 `main.js` 和 `index.html` 文件中进行更多的自定义和开发。希望这对你有帮助！如有其他问题，请随时提问。