龙空技术网

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

编程圈子 127

前言:

眼前咱们对“win10怎么封装成安装版系统”大概比较关注,大家都需要分析一些“win10怎么封装成安装版系统”的相关文章。那么小编同时在网摘上网罗了一些关于“win10怎么封装成安装版系统””的相关文章,希望你们能喜欢,你们一起来了解一下吧!

一、 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 下载地址:

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

nvm --version

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

三、安装nodejs

nvm list availablenvm install 16.16.0

在列出的可用版本里选择一个版本进行安装。

在这里插入图片描述

上面示例安装了16.16.0版本。

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

nvm use 16.16.0nvm on
四、安装nrm

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

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

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

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

五、安装electron1. npm 初始化

mkdir my-electron-app && cd my-electron-appnpm 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 

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

4. 创建一个页面

<!DOCTYPE html><html>  <head>    <meta charset="UTF-8">    <!--  -->    <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 Forge 添加到您应用的开发依赖中,并使用其"import"命令设置 Forge 的脚手架npm install --save-dev @electron-forge/clinpx electron-forge import# 制作分发包npm run make

生成结果示例:

在这里插入图片描述

标签: #win10怎么封装成安装版系统