Electron-02-创建并运行helloworld项目

最新推荐文章于 2024-07-30 18:56:40 发布
最新推荐文章于 2024-07-30 18:56:40 发布
阅读量650 收藏 3
点赞数 1
分类专栏： Electron 文章标签： Electron
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_16555743/article/details/93921860
版权

Electron-02-创建并运行helloworld项目

新建工作区

  1. 在F盘新建F:\Electron_WorkSpace用来存放项目目录

建立helloworld项目

  1. 建立F:\Electron_WorkSpace\helloworld目录并进入。
  2. npm init初始化项目：配置文件一路回车，我们暂不做配置，会新建一个package.json
    在这里插入图片描述
  3. npm install electron --save-dev安装electron作为helloworld项目的依赖。此命令执行时间有点长，因为要安装很多的依赖文件。
    在这里插入图片描述
    可以看到目录下多了很多文件
    在这里插入图片描述

编写代码

我们要关注的文件有三个

  1. package.json 通过npm init自动生成，需要修改
  2. index.js 自己创建一个主进程文件，需要些代码
  3. index.html 主窗口显示的页面，需要写代码
    在这里插入图片描述

package.json修改"script"

{
  "name": "helloworld",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
   "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^5.0.6"
  }
}

修改为

{
  "name": "helloworld",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "electron": "^5.0.6"
  },
  "devDependencies": {},
  "scripts": {
    "start": "electron ."
  },
  "author": "",
  "license": "ISC"
}

index.js

const electron = require("electron");
const url = require("url");
const path = require("path");

const {app, BrowserWindow} = electron;

let mainWindow;
//等待app准备好
app.on('ready', function() {
    //创建新窗口
    mainWindow = new BrowserWindow({});
    //将html加载到窗口
    mainWindow.loadURL(url.format({
        pathname: path.join(__dirname, "index.html"),
        protocol: "file",
        slashes: true
    }));

    //当关闭窗口是退出app
    mainWindow.on("closed", function() {
        app.quit();
    });
});

index.html

<html>
    <head>
        <title>HelloWorld</title>
    </head>
    <body>
        <h1>Hello World!</h1>
    </body>
</html>

运行

npm start

在这里插入图片描述

大黑黑牛
关注
专栏目录
第二讲 Electron项目创建的几种形式介绍
星火燎猿
07-30 882
Electron项目创建的几种形式介绍快速创建Electron项目使用git仓库快速克隆项目并创建下载项目使用npm进行项目生成使用Electron-forge搭建一个项目纯手工搭建一个Electron项目 快速创建Electron项目 该篇文章主要讲解怎么快速创建一个electron项目并将它运行起来，完成我们electron的第一个hello world事例，以后的课程事例我将使用vscode进行代码创建和演示，如果你还没有下载，请先下载最新的安装！为了让大家学习不那么杂乱，本教程的所有安装都是用npm
【Electron-Vue】构建桌面应用（2）-打包生成可window安装包
chenqk_123的专栏
09-11 2774
1.前言 在上篇文章中说到，使用Electron-Vue去构建一个Vue项目，并且可以通过package命令之后，生成了一些列的绿色文件(即执行安装包之后生成的文件)，点击其中的exe文件就可以运行了。 由于安装程序最后会以安装包的形式(即单一的exe文件)交付给客户，然后客户安装exe文件，会得到绿色文件。 下面这种就是安装包 下面这种就是安装之后的绿色文件 安装的同时会生成桌面图标，用户双击后会执行exe程序。 桌面图标 双击执行之后 以上所有的操作就是整个安装包从项目
Electron入门—Hello world
Meskjei的博客
02-22 409
不论是学习语言亦或是各种框架，最开始上手都必然是"Hello World"类型的简单编程。那么我作为一个Electron的初学者自然也不例外。 Electron应用从开发的角度来看可以视作是一个Node.js应用。所以一个基本的Electron应用的文件目录应该会是下面这个样子的（当然了，除了package.json其他文件的文件名都不一定）： Hello World/ ├── package.j...
Electron入门，项目运行，只需四步轻松搞定。
qq_41792374的博客
08-18 1772
桌面应用
Electron学习笔记（二）Hello World
最新发布
锕琅的博客
07-30 1016
接上一篇文章 Electron学习笔记（一）基础环境-CSDN博客 这一篇文章我们开始做第一个小demo
Electron之HelloWorld
my blog
04-20 1176
1.安装Electron和demo # 1.使用cnpm替换npm $ npm install -g cnpm --registry=https://registry.npm.taobao.org # 2.安装electron $ cnpm i -D electron@latest # 3.克隆示例项目的仓库 $ git clone https://github.com/electron/el...
Electron项目的运行和启动
u013896513的博客
08-21 417
大家从仓库上pull下来一个新的electron项目，运行后可能都遇到过这样的报错“fh_node_api.node is not a valid Win32 application”electron目录npm install下载依赖包后，启动项目报错“fh_node_api.node is not a valid Win32 application”。fh_node_api.node是x86的架构方式，npm install默认下载下来的electron依赖包是64位，需要指定下载32位。
Electron 项目开发及打包运行
轻风细雨_林木木
01-02 327
Electron 项目开发及打包运行 目标：使用electron制作.exe和.dmg软件 教程说明： 实现效果： 选中.dmg文件，并安装 安装结束后，双击运行。 源码下载：下载 GItee手册位置：https://gitee.com/linzhifen5/electron-project ...
electron环境搭建 + hello world 案例的运行,打包
qq_39846689的博客
09-27 640
简介: Electron是由Github开发，用HTML，CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。 可以利用 Web技术开发跨平台桌面应用的框架，最初是 Github 发布的 Atom 编辑器衍生出的 Atom Shell，后更名为 Electron。 Electron通过将Chromium和Node.js合并到同一个运行时环境中，并将其打包为M...
electron安装及hello world
skyrim894的博客
10-17 108
安装node.js electron安装的前提条件是node.js,下载最新版就好 node.js下载地址 https://nodejs.org/en/download/https://nodejs.org/en/download/ 安装的时候记得检查 npm是否有勾选上,以免之后独立安装npm 安装好之后检查版本 electron安装 正常安装输入以下命令 npm install -g electron 但国内一般无法正常安装,得为npm 换国内源,一般换淘宝的就好 np..
electron-quick-start.rar
07-29
在 Electron 中，"Hello world" 程序会显示一个基本的窗口，向用户展示“Hello world”文本。 Electron 结合了 Chromium（Google Chrome 浏览器的核心）和 Node.js，让你能够利用 Web 技术来开发桌面应用。Chromium...
electron-quick-start-linux-mips64el.tar.gz
01-26
用户需要先使用`tar -zxvf electron-quick-start-linux-mips64el.tar.gz`命令来解压缩，然后在支持MIPS64el架构的Linux环境下运行解压后的可执行文件，即可启动这个"hello,world"程序。 总的来说，这个压缩包提供了...
hello-world:Electron.js hello-world应用程序源代码-Source code world
03-25
根据提供的压缩包子文件的文件名称列表"hello-world-master"，我们可以推测这是项目的主分支或者已经完成的主要版本。"master"通常是Git版本控制系统中的默认分支，代表了项目的主要代码线。这个目录可能包含了项目...
electron-创建一个hello world应用
weixin_33743661的博客
08-11 71
2019独角兽企业重金招聘Python工程师标准>>> ...
electron之hello world
longtengg1的博客
05-14 194
1、项目初始化 新建项目文件夹（文件夹名称不能为中文） 在文件夹内运行 npm init -y npm i electron --save-dev 安装electron 最小的electron项目应用具有如下文件 package.json man.js index.html 2、 在package.json中 指定主脚本文件（入口文件） 添加一个启动命令 "main": "main.js", "scripts": { "start": "electron ." }, 3、在main
electron的HelloWorld
weixin_44077336的博客
12-29 452
创建一个最简单的electron项目
Electron 开始运行及示例项目简要介绍
zhichaosong的博客
05-21 2460
Electron 是基于 Chromium 和 Node.js 的开源项目, 让你可以使用 HTML, CSS 和 JavaScript 构建桌面应用程序，兼容 Mac、Windows 和 Linux。 文章目录一、运行项目二、快捷键三、项目目录3.1 package.json 一、运行项目 Electron官网：https://www.electronjs.org/ # 克隆示例项目的仓库 $ git clone https://github.com/electron/electron-quick-s.
Electron项目运行时满屏飘红和卡在编译阶段，问题解决
weixin_42044763的博客
10-25 883
跑的时候遇到满屏飘红的问题，最终发现是node版本过高导致，把node降到14.0.0版本，问题解决。2、使用npm安装也可以但是可能会失败，多安装几次，如果不行就用cnpm。跑的时候卡住，最后发现不小心在vue根标签外边敲了个字，把字删掉问题解决。3、在项目目录下使用cnpm淘宝镜像来安装（如果用npm可能会出错）把npm的仓库切换到国内taobao仓库，1、全局注册cnpm命令，如下。在浏览器运行前端：脚手架目录。使用窗口打开：项目根目录先。4、实在不行安装全局得了。
如何试运行electron
weixin_42588555的博客
01-13 234
首先, 你需要安装 Node.js. 然后, 使用 npm (Node Package Manager) 安装 electron: npm install electron 接下来, 你需要创建一个文件夹, 用来存放你的 Electron 应用. 在文件夹中, 创建一个名为 main.js 的文件, 并在里面编写 Electron 程序的主要逻辑. 在文件夹中, 创建一个名为 index.ht...
electron-vue+serialport 使用
04-27
要在 electron-vue 中使用 serialport，需要执行以下步骤： 1. 安装 serialport 库：在终端中运行 `npm install serialport --save` 2. 在 vue 组件中引入 serialport 库：`const SerialPort = require('serialport')` 3. 在需要使用串口的地方，创建一个新的串口实例并打开： ``` let port = new SerialPort('/dev/tty-usbserial1', { baudRate: 9600, autoOpen: false }); port.open(function (err) { if (err) { return console.log('Error opening port: ', err.message); } console.log('Port opened!'); }); ``` 其中，`/dev/tty-usbserial1` 是串口的路径，需要根据实际情况进行修改。 4. 在需要读取串口数据的地方，监听 `data` 事件： ``` port.on('data', function (data) { console.log('Data:', data.toString()); }); ``` 5. 在需要向串口发送数据的地方，使用 `write` 方法： ``` port.write('Hello World'); ``` 需要注意的是，在 electron 中使用串口需要先安装对应的驱动程序。另外，串口的配置需要根据实际情况进行修改。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值