Electron初体验，学习笔记

最新推荐文章于 2024-07-10 17:51:16 发布
最新推荐文章于 2024-07-10 17:51:16 发布
阅读量4.7k 收藏 2
点赞数 2
分类专栏： 前端学习 文章标签： electron expressjs web打包
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/talentxiet/article/details/52583435
版权

官网中，对Electron的介绍是 Build cross platform desktop apps with JavaScript, HTML, and CSS。意思很清楚，可以把web打包成桌面程序。简单的理解，就是把你的web网站套上一个精简的chrome的壳子，然后给用户使用。

接下来我们将安装electron并跑几个简单的demo。

1.安装electron，npm install electron。

通过npm我们可以快速地安装Electron，假如不用淘宝源速度会比较慢，也可以直接github上找electron最新的安装文件，然后npm install electron即可。

2. 官方demo

这个demo跑起来是这个样子的

最低0.47元/天 解锁文章
谢小天
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
electron_express_helloWorld
07-22
Electron Express.js 你好世界 首先确保您的系统上有 Node.js / npm。 然后确保你的系统上有电子 npm install electron-prebuilt -g 入门： npm install 然后确保运行./node_modules/.bin/electron-rebuild 这将为您提供与电子的 node_module 兼容性，无论何时您调用 npm install 您都必须调用./node_modules/.bin/electron-rebuild 。
Electron-express-react-App:使用Express服务器和React的Electron应用程序的快速入门
05-04
电子表达React应用程序 使用Express服务器和React的Electron应用程序的快速入门 设置 $ cd electron-express-react-app $ npm install --force (optionnal) $ npm start or $ npm run dev 在“开发模式”下启动应用程序 转到index.js文件仅在第四行注释，它用于同时启动与应用程序的服务器 运行此命令： npm run dev 这将使用nodemon启动服务器，然后使用Electron应用程序启动，该应用程序将加载默认设置为http://localhost:5000的指定地址。 现在，您可以在服务器/ api上进行编辑，并实时查看编辑内容。 Webpack建立在开发模式下（它将在您编辑app文件夹上的内容时建立时间）之后，您只需在devtools中键入location.relo
如何在electron中运行express服务，并调用express服务？
fanpink的博客
12-22 2043
建议您复制一份 GitHub 的 Node.js gitignore 模板 到您项目的根目录，以避免将 node_modules 文件夹提交到版本控制系统中。1.要执行这个脚本，需要在 package.json 的 scripts 字段中添加一个 start 命令，内容为 electron .。折腾了挺久的，看了很多教程资料，很多资料对初学者并不友好，这里将整个过程记录一下，希望对遇到同样问题的人有帮助。1.在根目录下新建 main.js 文件，写入代码。4.在根目录下新建 html文件，写入代码。
eletron入门教程 -- 快速写一个electron demo程序
weixin_43354152的博客
05-26 719
由于工作需要，前段时间基于electron框架开发了一个桌面应用程序。由于我之前主要是做c++后端开发，所以没有任何electron基础，也没有任何前端开发基础，但是没有办法，老板需要，那就得会，不会就得学。经过一段时间的开发，也积累了一点electron框架和前端开发的经验，借此机会总结一下，一是记录自己的一个学习过程，另外也希望可以帮助到有需要的人。
Electron快速上手
m0_63823719的博客
01-08 848
Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。嵌入和到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。
electron 打包把node代理服务打包进去_用 Node.js 官方镜像打包一个 express 服务
weixin_40008920的博客
11-22 873
最近感觉确实有必要了解一下 Docker，在 CI/CD 这个阶段很有用，所以记录一下。先放上 Node.js 的官方 Docker 镜像。Docker Hub​hub.docker.com需要拉一个官方的 image 下来。docker pull node这么写会拉下 tag 为 latest 的 image，如果想要拉其他的镜像，就要去看官方都提供了什么 tag 可以用。比如想拉取版本 12。...
vue & element & electron MAC学习笔记
01-07
查看vue版本 vue --version 2. 下载安装vue cli , 命令行安装 sudo npm install -g @vue/cli # xcode 的CLI 工具 sudo xcode-select --install # 查看vue历史版本 npm view @vue/cli --versions --json ...
study-electron:电子学习笔记
05-31
电子学习笔记 什么是电子？ 您可以使用 node.js (io.js) + Chromium 使用 web 技术 (html + css + javascript) 创建桌面应用程序 → 您可以使用浏览器 API 和节点 API 的组合 跨平台（mac、windows、Linux）兼容 ...
electron-resource.zip electron学习资源
03-19
Electron是基于Chromium和...通过深入学习和实践这些资源，你将能够掌握Electron框架，从而构建出功能丰富、用户体验优秀的桌面应用程序。无论你是前端开发者还是全栈开发者，Electron都能为你的工作开辟新的可能性。
electron做一个丐版浏览器，只有输入网址显示网页的功能，适合学习
05-04
electron做一个丐版浏览器，只有输入网址显示网页的功能，适合学习 博客：用electron做一个浏览器 博客地址：https://tinycool.blog.csdn.net/article/details/124565497
前端+将vue项目打包为桌面应用+electron学习
04-15
内容概要:Electron是一个开源的框架，用于构建跨平台的桌面应用程序。它是由GitHub开发的，最初是为了构建...使用人群:学习Electron,将vue项目打包为桌面应用 内容关键词:vue,Electron 用途:将vue项目打包为桌面应用
electron-with-express, 演示如何从电子生成Express应用程序的简单应用程序.zip
09-18
electron-with-express, 演示如何从电子生成Express应用程序的简单应用程序 electron-with-express一个简单的项目，演示如何在电子应用中直接从电子和提供服务器日志。快速应用： 按'f1'显示服务器日志： 依赖项请注意，这种方法适用于 Windows 平台，任何其他操作系统方法都
基于electron、react、express、mongodb的智能财务系统
08-01
基于node.js、vue、mongodb等技术构建的web系统，界面美观，功能齐全，适合用作毕业设计、课程设计作业等，项目均经过测试，可快速部署运行！ 基于node.js、vue、mongodb等技术构建的web系统，界面美观，功能齐全，适合用作毕业设计、课程设计作业等，项目均经过测试，可快速部署运行！ 基于node.js、vue、mongodb等技术构建的web系统，界面美观，功能齐全，适合用作毕业设计、课程设计作业等，项目均经过测试，可快速部署运行！
vue的应用实例2-桌面端electron
08-06
首先要使用express -t ejs app来创建一个名字为app的文件夹。 之后就是npm install把所要用到的模块都载入进来。 然后我们需要安装electron-prubuilt包。可以通过命令npm install --saved-dev electron-prebuilt进行安装。
electron + express 实现 vue 项目客户端部署
最新发布
u012123612的博客
07-10 1161
package.json中添加},执行npm run packager，打包成软件。这样基本实现了vue项目的客户端化，当然，别忘了起后端服务。
推荐文章：利用Electron与Express构建一体化应用
gitblog_00082的博客
05-19 500
推荐文章：利用Electron与Express构建一体化应用 项目地址:https://gitcode.com/frankhale/electron-with-express 在这个数字化的时代，开发跨平台的桌面应用变得越来越重要。而electron-with-express项目为我们提供了一个完美的解决方案，它将强大的Electron框架与灵活的Express.js后端框架相结合，使得前端和后台...
安利一个我自己写的开源免费的Bug管理软件
weixin_34082695的博客
09-15 186
TodoKit TodoKit是一个免费的高颜值产品需求和Bug管理软件，包括Mac客户端和网页版。官网：https://www.todokit.vip Getting Started 使用TodoKit，需要你下载最新版的客户端 或者使用网页版 登录／注册 下载最新客户端或者网页版后，未登录的用户将引导到，手机号码登录页面。未注册的用户...
关于electron打包的坑
大大黄的博客
10-25 3510
首先electron打包的方式有两种 通过electron-builder 通过electron-package 两种方式，electron-builder打包的话扩展性更强，包也较小，electron-package打出来的包相对扩展性更小，且包容量较大，一般都会选择electron-builder进行打包。 注意electron和electron-build版本的问题 1.两者配套使用，如果两者的包不是配套的，版本不适配那么就会导致打包失败，因此我们使用electron-build打包的时候一定要注
electron 如何学习
06-08
如果你想学习 Electron，可以按照以下步骤： 1. 学习基础知识 首先你需要了解一些基础知识，例如 Node.js 和前端开发技术（HTML、CSS、JavaScript）。如果你已经掌握了这些知识，那么就可以开始学习 Electron。 2...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值