Electron入门笔记（一）-自己快速搭建一个app demo

最新推荐文章于 2024-04-12 22:56:40 发布
最新推荐文章于 2024-04-12 22:56:40 发布
阅读量1.2k 收藏 3
点赞数
分类专栏： electron
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sueRimn/article/details/86141855
版权
本文是Electron入门的第一部分，介绍了如何安装Node.js，创建项目文件，初始化npm，设置主进程，编写HTML和JS代码，以及启动和打包应用的基础步骤。适合初次接触Electron的开发者参考。
摘要由CSDN通过智能技术生成

Electron入门笔记（一）-自己快速搭建一个app demo

Electron学习-快速搭建app demo

作者： 狐狸家的鱼

Github： 八至

一.安装Node

 

1.从node官网下载 ，最好安装.msi后缀名的文件，新手可以查看安装教程进行安装。

2.然后cmd进入命令窗口，输入npm -v查看node当前版本，

二.创建文件并初始化

 

1.在自己喜欢的盘里新建项目文件，我是  E:\Electron\resources\app，在此文件目录app下打开命令窗口，按住shift ，右击空白处，选择在此处打开powershell命令窗口

2.在命令窗口输入：npm init，然后一直回车，直到package.json文件完成

3.在VS code中打开项目文件，新建In

最低0.47元/天 解锁文章
DebJane
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Electron 初学
mmuhua的博客
05-14 617
一.安装    1.安装nodejs    由于electron是基于nodejs的，所以我们首先要安装nodejs    官网地址:https://nodejs.org/en/     直接下载安装即可;看安装是否成功命令:node -v,npm -v ;出现版本号即表示安装成功    2.安装electron        2.1由于直接访问国外服务器缓慢,我选择先安装淘宝镜像的包命令行管理工...
Electron 生命周期看这篇就够了
淘系技术
03-04 2767
常见应用都有启动、激活、关闭这些事件，Electron 作为一个跨平台的 GUI 框架，为了兼顾不同的场景，需要的事件就会更多。如果想要更深入的了解 Electron 整个生命周期的流程，...
Electron app.getPath() 路径含义和示例
最新发布
不会java的java程序员
04-12 1495
关于Electron中app.getPath(name: string): string各参数的说明以及示例。
electron： pc端应用
qq_36413371的博客
10-28 607
参考文章： https://zhuanlan.zhihu.com/p/124297174 C/S架构 - electron 主进程 渲染进程 可以实现不同页面的交互 系统托盘 应用程序打包(windows mac) electron可以调用所有的nodejs的api 一： 创建electron main.js // 入口函数 需要配置"main": "main.js", const { app, BrowserWindow } = require('electron') function cr
使用 electron 开发桌面应用并打包
猛犸象
04-27 1478
一、概要 文档 官网：https://www.electronjs.org/ 文档：https://www.electronjs.org/docs 环境准备： 安装 node.js 包管理工具 npm node -v npm -v 二、创建一个 Electron DEMO 参考文档：https://www.electronjs.org/docs/tutorial/quick-start#prerequisites 项目架构 从开发的角度来看，Electron 应用本质上是一个 Node.js 应用。 这
Electron 12 学习（二）Electron 12 安装与配置
05-21 1871
设置 electron 镜像： npm config set ELECTRON_MIRROR https://npm.taobao.org/mirrors/electron/ 全局安装 Electron 并测试： npm i -g electron C:\Users\xuxiaowei>npm i -g electron D:\Program Files\nodejs\node_global\electron -> D:\Program Files\nodejs\node_globa..
electron-quick-start-master 快速入门教程
05-31
electron-quick-start-master 快速入门教程electron-quick-start-master 快速入门教程electron-quick-start-master 快速入门教程electron-quick-start-master 快速入门教程electron-quick-start-master 快速入门教程...
Electron:从零开始写一个记事本app
02-24
本文犹如HelloWorld一样的存在，是个入门级笔记，但如果你之前从未接触过Electron，而又对它有兴趣，某想信这会是一篇值得一看的入门教程。PS：这篇文章是基于Windows的开发过程，未对macOS、Linux作测试。点击这里...
electron插件：electron-v20.1.1-win32-zip下载
09-14
标题中的“electron-v20.1.1-win32-zip下载”指的是Electron框架的一个特定版本（v20.1.1）的Windows平台压缩包。Electron是一款开源的框架，它允许开发者使用JavaScript、HTML和CSS构建跨平台的桌面应用程序。这个...
electron-screenshot-app:截屏
05-25
$ npm install electron-screenshot-app --save 用法 var app = require ( 'electron' ) . app ; var screenshot = require ( 'electron-screenshot-app' ) ; app . on ( 'ready' , function ( ) { screenshot ( ...
electron-vue通过自定义协议唤起并传参数
qq_37568942的博客
05-06 3850
electron-vue通过自定义协议唤起，并且在协议后面加参数传递到程序中（协议唤起不区分浏览器）。需求为通过链接唤起程序并区分进入不同页面（本文只测试Windows环境）。 一、项目背景 先有Vue项目，后安装electron并通过electron-builder打包，安装完后会自动生成background.js并在package.json中添加入口，简单看下关键配置不做过多解释： 二、注册协议（注册协议和接收参数都在background.js中） 在创建窗口createWindow方法中添
electron app开发笔记
m0_45236510的博客
05-24 972
electron桌面端app开发
vue-electron打包后报错：Fetch API cannot load app://./EasyPlayer.wasm. URL scheme “app“ is not supported
zxstrive的专栏
08-26 1963
说是无法获取 app://./EasyPlayer.wasm，不支持“app”协议，我想不对啊，那app://./index.html怎么能访问呢？这就是 electron 自定义的一个协议，用于访问vue页面的，我的理解是这样子的。运行打包后的 electron 应用，打开控制台，发现app://./服务目录下没看到 EasyPlayer.wasm文件，什么情况？惊奇的发现，H265的视频居然可以看了！如下图所示，用红框框的地方，原来打包的时候是没有的。Object (可选)重新打包，运行程序！.....
Electron app模块
小柒的前端之旅
03-12 2176
前面的话 在Electron中主进程的app模块很重要，这里只列举一些常用的事件与方法： const {app, BrowserWindow} = require('electron'); app模块是为了控制整个应用的生命周期设计的，可以通过app.on方法来监听Electron的整个生命周期中的事件。 常用事件 ready事件 初始化时被触发，通过app.on(‘ready’, functi...
electron开发app
daoer_sofu的专栏
12-05 2398
新建electron项目 npm init 后填写项目基本信息生成package.json文件 package.json中 “main"指定文件"main.js”, “script"制定"start"为"electron .”------->npm run start index.html文件 &
vuecli4 electron13.3.0 创建客户端应用以及安装、打包时候遇到的问题
jmszl1991的博客
09-15 1036
1、创建项目 // 这个步骤不在多说 vue create vue-electron-demo 2、添加electron # 项目创建完毕之后,进入项目文件夹 cd vue-electron-demo # 添加electron vue add electron-bilder 注意，这里开始出现问题。 不管你的npm是不是淘宝镜像，你会发现这个electron下载的很慢或者干脆就是报错。 这里有个技巧： 当执行到 node install.js .... 你就需要ctrl+c，
electron APP模块
两个人的幸福online
10-20 493
这个模块是用来控制整个应用的生命周期的，这里记录几个常用的生命周期。限制双开，下面是一个限制双开的示例。
vue-cli + electron打包项目成客户端
mostrichman的博客
04-27 851
4.如果想要更改客户端图标和应用名称等信息的话，可以在vue.config.js中配置,以下是部分配置参数。5.接下来就可以使用 npm run electron:build 进行打包了。*这里需要注意的是，图标的尺寸一定要是 256*256 的，否则会报上面的错。以上就是vue-cli + electron打包项目成客户端的全部过程。3.执行npm run electron:serve查看效果。修改完图标尺寸重新执行打包命令，打包成功后的文件夹是这样的。2.添加electron-builder。
electron-release-server服务器搭建
09-19
electron-release-server是一个用于管理Electron应用程序版本发布的服务器。它可以帮助开发人员集中管理不同版本的Electron应用，并提供一个统一的发布平台。 要搭建electron-release-server服务器，首先需要安装...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值