当前位置: 首页 > news >正文

electron入门 | 手把手带electron项目初始化

Electron是一个基于Chromium和 Node.js,可以使用 HTML、CSS和JavaScript构建跨平台应用的技术框架,兼容 Mac、Windows 和 Linux。

目录

1.了解electron

2.开发环境

3.初始化

采坑插曲:


 

1.了解electron

Electron 可以让你使用纯 JavaScript 调用丰富的原生 APIs 来创造桌面应用。你可以把它看作是专注于桌面应用而不是 web 服务器的,io.js 的一个变体。

它还有其它一些特性:

  • 自动更新 —— 应用支持自动更新
  • 原生菜单和通知 —— 可以创建原生应用菜单和上下文菜单
  • 应用崩溃报告 —— 可以将崩溃报告提交到远程服务器
  • 调试和分析 —— Chrominum 的内容模块可以发现性能瓶颈和缓慢的操作。你也可以在应用中使用自己喜欢的 Chrome 开发者工具。
  • Windows installer —— 可以快速便捷地创建安装包。

这不意味着 Electron 是绑定了 GUI 库的 JavaScript。相反,Electron 使用 web 页面作为它的 GUI,所以你能把它看作成一个被 JavaScript 控制的,精简版的 Chromium 浏览器。

2.开发环境

nvm切换node到:v18.16.0

npm 版本:9.5.1

关于node版本切换欢迎先学习:使用nvm替换nvmw作为nodejs的版本切换(亲测)_啥咕啦呛的博客-CSDN博客

3.初始化

本次我采用的是直接GIT上克隆一个A minimal Electron application的方式,其他方式下次尝试哈,比如脚手架构建啊,还有直接引入啊等。

GitHub - electron/electron-quick-start: Clone to try a simple Electron app

 打开上述链接,按照To Use介绍直接clone到本地:

 防止被割,我翻译如下:

# 克隆
git clone https://github.com/electron/electron-quick-start# 打开文件夹
cd electron-quick-start# 按照依赖
npm install# 允许应用
npm start

采坑插曲:

说一下这边的采坑之旅啊

我这边现在下载的是electron 24.0.0版本,然后,npm下载不下来,换镜像源也不行。然后我采用广大网友的土方法,直接在electron目录中下载对应版本。

然后进行骚操作:

  • 进入目录 XXXXXXXX/node_modules/electron
  • 新建文件夹 dist
  • 新建文件path.txt,根据自己的系统类型输入:
    windows系统输入: electron.exe
    mac系统输入:Electron.app/Contents/MacOS/Electron
    linux系统输入:electron
  • 解压缩刚下载的文件到dist目录

but,我还是坚持用npm install 了eletron的7.0.0的版本,就是package.json里修改版本号:

我记得我之前用的还是7.0.0,这些年electron更新换代不少版本,我还是把当年的版本下载下来试试了。总之,electron终于是安装可以运行了。

 最后,执行

npm start

可以看到自动打开的窗口:

 electron项目初始化就大功告成了。

以上,就是今天的学习,关注我,我们一起进步!

欢迎点赞、评论,谢谢!~

学习参考:Electron 快速入门_w3cschool

不一样的 npm 快速安装electron的方案 - 简书

http://www.lryc.cn/news/64568.html

相关文章:

  • ​力扣解法汇总2423. 删除字符使频率相同
  • 【超算/先进计算学习】日报8
  • 《LearnUE——基础指南:上篇—2》——GamePlay架构之Level和World
  • IDEA部署tomcat项目
  • IAM角色
  • 【VAR | 时间序列】以美国 GDP 和通货膨胀数据为例的VAR模型简单实战(含Python源代码)
  • 常用的设计模式之二(行为型模式)
  • MYSQL基本操作(增删改查)
  • 双周赛103(模拟、网格图BFS、树状数组)
  • 【数据结构】二叉树(详细)
  • 蓝牙耳机哪款性价比高一些?2023年性价比最高的蓝牙耳机推荐
  • 等保2.0存在的问题
  • 国民技术N32G430开发笔记(9)- IAP升级 Bootloader的制作
  • 如何使用depcheck检查vue和react的依赖,以后不用把时间浪费在依赖问题上了
  • 使用Python和机器学习进行文本情感分类
  • QML路径视图(The PathView)
  • 5月4号软件资讯更新合集.....
  • 基于 Rainbond 的混合云管理解决方案
  • 加强网络风险生命周期
  • Java——二叉树的深度
  • 一般现在时(二)
  • leetcode657. 机器人能否返回原点
  • DAY 48 Nginx的 location与rewrite模块
  • Linux 常用操作技巧
  • BetaFlight统一硬件配置文件研读之timer命令
  • 码出高效:Java开发手册笔记(java对象四种引用关系及ThreadLocal)
  • 为什么要进行数据决策?数据决策对企业而言有何重要意义?
  • 2. Java 异常体系
  • 如何学好STM32,需要哪些步骤?
  • 武忠祥老师每日一题||不定积分基础训练(四)