Electron学习1 安装环境与第一个程序

这篇具有很好参考价值的文章主要介绍了Electron学习1 安装环境与第一个程序。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Electron学习1 安装环境与第一个程序,# Electron,electron,学习,javascript

一、 Electron 简介

Electron是一个用于构建跨平台桌面应用程序的开源库。它使用HTML、CSS和JavaScript等技术,通过将Web技术打包为原生应用程序,使得开发者能够创建出具有本地操作系统特性的软件。Electron使用Chromium作为渲染引擎,并允许开发者使用Node.js来访问底层系统资源。

本文将介绍electron开发环境配置。
准备环境 :

  • windows10
  • 一款编辑器软件,如vscode

二、安装 nvm

nvm(Node Version Manager)是一个用于管理Node.js版本的工具,它允许你在同一台机器上安装和切换多个Node.js版本。

nvm的主要功能包括:

  • 安装多个Node.js版本:你可以使用nvm安装多个Node.js版本,并在需要时进行切换。这使得你可以在同一台机器上测试不同版本的Node.js应用程序。
  • 切换Node.js版本:使用nvm,你可以轻松地在不同版本的Node.js之间进行切换,只需运行nvm use [version_number]即可。
  • 创建独立的Node.js环境:你可以使用nvm为每个项目创建一个独立的Node.js环境,这样每个项目都可以使用其自己的Node.js版本,而不必担心版本冲突。
  • 安装npm包:你可以使用nvm安装npm包,并确保它们与当前的Node.js版本兼容。

nvm 下载地址:
https://github.com/coreybutler/nvm-windows/releases

下载exe程序双击安装即可。
按提示,安装完以后,命令行运行:

nvm --version

可以查看到打印出版本信息。下面使用nvm来安装nodejs。

三、安装nodejs

nvm list available
nvm install 16.16.0

在列出的可用版本里选择一个版本进行安装。
Electron学习1 安装环境与第一个程序,# Electron,electron,学习,javascript
上面示例安装了16.16.0版本。

安装后,激活默认nodejs版本。

nvm use 16.16.0
nvm on

四、安装nrm

nrm 是 npm 的源管理工具,可以方便地添加、切换和删除 npm 源。nrm 的全称是 “npm Resource Manager”,旨在帮助开发者管理 npm 源的配置和切换。

使用 nrm,你可以轻松地在不同的 npm 源之间进行切换,而无需手动修改 npm 的配置文件。这对于在多个项目之间切换或者使用不同的 npm 源时非常有用。

# 安装 nrm
npm install -g nrm
# 列出可用源
nrm ls
# 使用指定源
nrm use taobao

其它还有添加、删除源等功能,平时并不常用 。

五、安装electron

1. npm 初始化

mkdir my-electron-app && cd my-electron-app
npm init

在文件夹里创建以下文件:

2. 创建 package.json

{
  "name": "my-electron-app",
  "version": "1.0.0",
   "scripts": {
    "start": "electron ."
  },
  "description": "Hello World!",
  "main": "main.js",
  "author": "Jane Doe",
  "license": "MIT"
}

3. 安装electron

npm install --save-dev electron

如果报类似下面错误:

Error: Failed to find Electron v6.0.3 for win32-x64 at https://cdn.npm.taobao.org/dist/electron/6.0.3/electron-v6.0.3-win32-x64.zip

则到 node_modules/electron下执行 node install.js

4. 创建一个页面

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>你好!</title>
  </head>
  <body>
    <h1>Electron , 你好!</h1>
  </body>
</html>

5. 创建文件main.js

const {app, BrowserWindow} = require('electron')
const path = require('path')

const createWindow = ()=>{
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            preload: path.join(__dirname, 'preload.js')
        }
    });
    win.loadFile('index.html');
};

app.whenReady().then(()=>{
    createWindow();

    // 苹果在退出后仍驻留
    app.on('activate', ()=>{
        if (BrowserWindow.getAllWindows().length === 0 ){
            createWindow();
        }
    });
});

app.on("window-all-closed", ()=>{
    if(process.platform !== 'darwin') app.quit();
});


6. 创建预加载器文件 preload.js

window.addEventListener('DOMContentLoaded', () => {
    // 暂时什么都不做
})

文件夹示例:

7. 启动程序

npm start

Electron学习1 安装环境与第一个程序,# Electron,electron,学习,javascript

六、打包

使用命令:

# 将 Electron Forge 添加到您应用的开发依赖中,并使用其"import"命令设置 Forge 的脚手架
npm install --save-dev @electron-forge/cli
npx electron-forge import
# 制作分发包
npm run make

生成结果示例:
Electron学习1 安装环境与第一个程序,# Electron,electron,学习,javascript文章来源地址https://www.toymoban.com/news/detail-638146.html

到了这里,关于Electron学习1 安装环境与第一个程序的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【electron 4】electron配置打包环境

    window需要:ico mac需要:icns linux需要png 借助:electron-icon-builder 安装: 配置package.json scripts 说明: input:icon.png是我需要引入的图标 output:是我将input引入图标所转换不同大小不同格式的图标输出文件 因为我是已有的项目了,所以这里我只需要安装并引入electron-forge,虽然我进

    2024年04月28日
    浏览(37)
  • 安装包UI美化之路-通过nsNiuniuSkin来做Electron程序的打包、发布与升级

    nsNiuniuSkin从发布之初,因其简单、简洁、高效,受到了非常多公司的青睐,现在已经越来越多的公司采用我们的这套解决方案来制作安装包了! 从一个安装包UI插件,逐步演化成一套集美观、安全、简洁、自动化为一体的完整的解决方案,实属不易,感谢所有朋友的信任!

    2024年02月02日
    浏览(38)
  • 创建第一个electron项目

    创建package.json 创建electron 创建程序主入口文件 main.js,electron分为主进程和渲染进程,main,js也可以理解为electron项目的主进程,在主进程中是node环境不可以写操作dom方法,在渲染进程中是浏览器环境 可以写操作dom的一些方法 使用nodemon快速启动项目 package.json文件里面的配置 我这里

    2024年02月03日
    浏览(39)
  • Electron环境搭建

    Electron是一个优秀的开源框架,用于构建跨平台的桌面应用程序。它基于Chromium和Node.js,使得开发者可以使用Web技术(HTML、CSS和JavaScript)来构建可在Windows、macOS和Linux等多个操作系统上运行的应用程序。本文将介绍如何搭建Electron环境,快速开始您的桌面应用程序开发之旅。

    2024年02月11日
    浏览(34)
  • Electron 环境搭建

    https://www.elecfans.com/d/2008177.html https://www.elecfans.com/kf/ https://www.hqpcb.com/ https://www.hqchip.com/ https://www.nextpcb.com/ https://www.hqchip.com/bom.html https://www.hqchip.com/app/dianzudianrongdiangan https://mkt.51job.com/ https://www.ucloud.cn/ https://t.elecfans.com/ https://www.mydown.com/ WordSegment.dll https://www.cnblogs.com/gisp

    2024年02月02日
    浏览(36)
  • Electron实战之环境搭建

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

    2024年02月22日
    浏览(38)
  • electron 打不同环境的包

    我用的打包工具: electron-builder 1、在package.json 文件的同级下创建2个js文件       electron-builder-test.config.js   electron-builder.config.js electron-builder-test.config.js electron-builder.config.js  (主要就是一些build的基础配置) 2、在需要区分环境的地方获取package.json文件 读取变量 区分代码

    2024年04月09日
    浏览(33)
  • electron项目开发环境搭建

    由于最近需要做一款跨平台的桌面应用,所以选择使用electron来作为开发的框架,下面说一下如何搭建一个简单的electron项目: 一、准备工作 安装git:下载git | 官网 安装node:下载 | Node.js 中文网 安装npm/cnpm:npm install -g cnpm --registry=https://registry.npm.taobao.org  安装electron:cnpm i

    2024年02月13日
    浏览(42)
  • 【electron】Puppeteer 和 Electron 共用同一个Chrome 或 Chromium浏览器二进制文件

    将 Puppeteer 的可执行路径设置为 Electron 的可执行路径来实现这一点 以下是一个示例代码,展示了如何在 Puppeteer 中使用 Electron 的浏览器二进制文件: 在上述代码中,你需要将 executablePath 变量设置为 Electron 的可执行路径。然后,在启动 Puppeteer 时,将 executablePath 设置为 laun

    2024年02月10日
    浏览(51)
  • electron、electron-forge 安装

    npm修改了registry,安装依旧无效 使用cnpm 倒是可以解决,但是 npx electron-forge import 中 Installing dependencies 使用的是npm 给出一次性解决方案: step1:切换npm的下载源,可以使用nrm 进行管理,有很多写的了,就不赘述了。 或者直接修改 (ps:如果你还想修改回来,可以记录一下现

    2024年02月13日
    浏览(34)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包