前端小白安装node、vue、Express、Electron及(Electron桌面端exe应用开发)

devtools/2024/10/21 0:32:10/

一、node.js

（一）、下载

  1. 下载地址

Node.js — 在任何地方运行 JavaScript (nodejs.org)

参考文章：Node.js安装及环境配置超详细教程【Windows系统】_windows 安装nodejs-CSDN博客

（二）、安装

安装路径可以更换，其他都是默认下一步。

  1. 第一步增加系统变量

（1）新建变量NODE_HOME，变量值为安装路径：E:\Program Files\nodejs

（2） PATH 变量增加,需要先新建node_global和node_cache在E:\Program Files\nodejs路径下面。

%NODE_HOME%

%NODE_HOME%\node_global

%NODE_HOME%\node_cache

  1. 第二步增加用户变量

E:\Program Files\nodejs\node_global

  1. 检查安装情况

    node -v

    npm - v

    C:\Windows\system32>npm -v
10.8.1C:\Windows\system32>node -v
v20.16.0

  2. 配置缓存目录和全局目录

    缓存目录

    npm config set cache “E:\Program Files\nodejs\node_cache”

    全局目录**

    npm config set prefix “E:\Program Files\nodejs\node_global”

    (参考文档这边不对的)

    设置成功可以看到，这边是我自己的路径

    C:\Windows\system32>npm config get prefix
D:\it\node20\node_globalC:\Windows\system32>npm config get cache
D:\it\node20\node_cache

  3. 设置国内源配置（参考文档的镜像源已经不可用）

# 设置国内源
npm config set registry https://registry.npmmirror.com
# 查看国内源
npm get registry

如果不行在换一个

npm config set registry http://registry.npmjs.org/

删除npm config delete registry

  1. 使用pnmp方式安装

    第一步设置国内源：npm config set registry https://registry.npmmirror.com (我是这个镜像可以安装pnmp)

    第二步安装pnmp: npm install pnpm -g

二、Express

  1. express使用

    存储变量需要配置好不然会报错的

D:\it\node20\node_cache\node_modules>express --version
‘express’ 不是内部或外部命令，也不是可运行的程序

  1. 安装方式(需要使用管理员权限)

    npm install express -g

    npm install express-generator -g

    移除是

    npm uninstall express -g

    npm uninstall express-generator -g

    部分资料没有这个 express-generator 是没有办法使用的，

    你将无法使用 express 命令来创建新的 Express 应用，因为 express 命令实际上是 express-generator 提供的。

  2. 安装成功

D:\it\node20\node_cache\node_modules>express --version
4.16.1
  1. express启动
express express_example
destination is not empty, continue? [y/N] y
cd express_example
npm install
# windows 命令行
set DEBUG=myapp:* & npm start

express-example@0.0.0 start
> node ./bin/wwwGET / 200 1734.181 ms - 170
GET /stylesheets/style.css 200 3.004 ms - 111
GET /favicon.ico 404 8.515 ms - 1172

成功后浏览器打开 http://localhost:3000/ ，一个应用就启动了。还是很方便的。

参考：Express 应用程序生成器 - Express中文文档 | Express中文网 (expressjs.com.cn)

​ 5. express 关闭

Ctrl + C

终止批处理操作吗(Y/N)? Y

三、vue.js

(一)、vue安装

npm install vue -g

npm install vue-cli -g

D:\it>vue -V
2.9.6

四、Electron记事板开发

(一)、初始化项目

创建一个新的项目目录并初始化

mkdir electron-notepad
cd electron-notepad
npm init -y

(二)、安装Electron

安装Electron作为项目的依赖,时间很长。我花了10多分钟。

pnpm install electron --save-dev

成功输出

Packages: +75
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Progress: resolved 75, reused 0, downloaded 75, added 75, done
node_modules/.pnpm/electron@31.3.1/node_modules/electron: Running postinstall script, done in 10m 19.2sdevDependencies:
+ electron 31.3.1

(三)、创建主进程文件

在项目根目录下创建main.js

const { app, BrowserWindow } = require('electron');function createWindow () {// 创建浏览器窗口let win = new BrowserWindow({width: 800,height: 600,webPreferences: {nodeIntegration: true}});// 加载index.html文件win.loadFile('index.html');
}app.on('ready', createWindow);

在项目根目录下创建index.html，这将是记事本的界面

<!DOCTYPE html>
<html>
<head><title>Electron Notepad</title>
</head>
<body><textarea id="notepad" style="width: 100%; height: 90%;"></textarea><br><button onclick="save()">保存</button><button onclick="load()">打开</button><script>const { ipcRenderer } = require('electron');function save() {let text = document.getElementById('notepad').value;ipcRenderer.send('save-text', text);}function load() {ipcRenderer.send('load-text');}ipcRenderer.on('received-text', (event, text) => {document.getElementById('notepad').value = text;});</script>
</body>
</html>

在main.js中添加IPC通信，以便在Electron的主进程和渲染进程之间传递数据

const { ipcMain } = require('electron');ipcMain.on('save-text', (event, text) => {// 这里可以添加保存文件的逻辑console.log('Text saved:', text);
});ipcMain.on('load-text', (event) => {// 这里可以添加加载文件的逻辑event.reply('received-text', 'This is loaded text.');
});

(四)、编译安装包

  1. 安装electron-builder
pnpm install electron-builder --save-dev
  1. 在package.json中添加构建脚本
"scripts": {"start": "electron .","dist": "electron-builder"
}
  1. main改为main.js
"main": "main.js",
  1. 运行构建命令

Windows :pnpm run dist --win

macos:pnpm run dist --mac

Linux:pnpm run dist --linux

  1. 失败了，如果github访问没有问题不会存在以下错误。(成功不需要看)
> electron-notepad@1.0.0 dist D:\it\electron-notepad
> electron-builder "--win"• electron-builder  version=24.13.3 os=10.0.19045• description is missed in the package.json  appPackageFile=D:\it\electron-notepad\package.json• writing effective config  file=dist\builder-effective-config.yaml• packaging       platform=win32 arch=x64 electron=31.3.1 appOutDir=dist\win-unpacked⨯ Get "https://github.com/electron/electron/releases/download/v31.3.1/electron-v31.3.1-win32-x64.zip": EOF
github.com/develar/app-builder/pkg/download.(*Downloader).follow.func1/Volumes/data/Documents/app-builder/pkg/download/downloader.go:206
github.com/develar/app-builder/pkg/download.(*Downloader).follow/Volumes/data/Documents/app-builder/pkg/download/downloader.go:234
github.com/develar/app-builder/pkg/download.(*Downloader).DownloadNoRetry/Volumes/data/Documents/app-builder/pkg/download/downloader.go:128
github.com/develar/app-builder/pkg/download.(*Downloader).Download/Volumes/data/Documents/app-builder/pkg/download/downloader.go:112
github.com/develar/app-builder/pkg/electron.(*ElectronDownloader).doDownload/Volumes/data/Documents/app-builder/pkg/electron/electronDownloader.go:192
github.com/develar/app-builder/pkg/electron.(*ElectronDownloader).Download/Volumes/data/Documents/app-builder/pkg/electron/electronDownloader.go:177
github.com/develar/app-builder/pkg/electron.downloadElectron.func1.1/Volumes/data/Documents/app-builder/pkg/electron/electronDownloader.go:73
github.com/develar/app-builder/pkg/util.MapAsyncConcurrency.func2/Volumes/data/Documents/app-builder/pkg/util/async.go:68
runtime.goexit/usr/local/Cellar/go/1.17/libexec/src/runtime/asm_amd64.s:1581⨯ D:\it\electron-notepad\node_modules\.pnpm\app-builder-bin@4.0.0\node_modules\app-builder-bin\win\x64\app-builder.exe process failed ERR_ELECTRON_BUILDER_CANNOT_EXECUTE
Exit code:
1  failedTask=build stackTrace=Error: D:\it\electron-notepad\node_modules\.pnpm\app-builder-bin@4.0.0\node_modules\app-builder-bin\win\x64\app-builder.exe process failed ERR_ELECTRON_BUILDER_CANNOT_EXECUTE
Exit code:
1at ChildProcess.<anonymous> (D:\it\electron-notepad\node_modules\.pnpm\builder-util@24.13.1\node_modules\builder-util\src\util.ts:252:14)at Object.onceWrapper (node:events:634:26)at ChildProcess.emit (node:events:519:28)at ChildProcess.cp.emit (D:\it\electron-notepad\node_modules\.pnpm\cross-spawn@7.0.3\node_modules\cross-spawn\lib\enoent.js:34:29)at maybeClose (node:internal/child_process:1105:16)at Process.ChildProcess._handle.onexit (node:internal/child_process:305:5)ELIFECYCLE  Command failed with exit code 1.

  1. 手动下载

    迅雷下载

    https://github.com/electron/electron/releases/download/v31.3.1/electron-v31.3.1-win32-x64.zip

    下载后放到electron-notepad\node_modules\electron 目录下解压electron-v31.3.1-win32-x64.zip。

    electron-notepad\node_modules\electron 目录下创建path.txt文件，增加文件内容为electron.exe。

  2. 重写执行pnpm run dist --win

    成功的输出

    > electron-notepad@1.0.0 dist D:\it\electron-notepad
> electron-builder "--win"• electron-builder  version=24.13.3 os=10.0.19045• description is missed in the package.json  appPackageFile=D:\it\electron-notepad\package.json• writing effective config  file=dist\builder-effective-config.yaml• packaging       platform=win32 arch=x64 electron=31.3.1 appOutDir=dist\win-unpacked• default Electron icon is used  reason=application icon is not set• downloading     url=https://github.com/electron-userland/electron-builder-binaries/releases/download/winCodeSign-2.6.0/winCodeSign-2.6.0.7z size=5.6 MB parts=1• downloaded      url=https://github.com/electron-userland/electron-builder-binaries/releases/download/winCodeSign-2.6.0/winCodeSign-2.6.0.7z duration=1m0.46s• building        target=nsis file=dist\electron-notepad Setup 1.0.0.exe archs=x64 oneClick=true perMachine=false• downloading     url=https://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-3.0.4.1/nsis-3.0.4.1.7z size=1.3 MB parts=1• downloaded      url=https://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-3.0.4.1/nsis-3.0.4.1.7z duration=2.685s• downloading     url=https://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-resources-3.4.1/nsis-resources-3.4.1.7z size=731 kB parts=1• downloaded      url=https://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-resources-3.4.1/nsis-resources-3.4.1.7z duration=6.816s• building block map  blockMapFile=dist\electron-notepad Setup 1.0.0.exe.blockmap

  3. 可执行文件运行

    electron-notepad\dist\electron-notepad Setup 1.0.0.exe 双击一键安装


http://www.ppmy.cn/devtools/87687.html

相关文章

为什么 DDoS 攻击偏爱使用 TCP 和 UDP 包？

为什么 DDoS 攻击偏爱使用 TCP 和 UDP 包？

Distributed Denial of Service (DDoS) 攻击是指攻击者利用多个计算机系统或网络设备&#xff08;通常是被恶意软件感染的计算机&#xff0c;被称为“僵尸网络”&#xff09;来淹没目标服务器的资源&#xff0c;导致合法用户无法访问服务。TCP 和 UDP 是两种最常见的用于 DDoS …
阅读更多...
DataKit之OpenGauss数据迁移工具

DataKit之OpenGauss数据迁移工具

# 在讲openGauss和datakit之前&#xff0c;我先说下pgloader这个工具也支持将数据从mysql同步到openGauss或者postgresql&#xff0c;但是 注意了&#xff0c;官网明确说明了不支持视图和触发器的迁移&#xff0c;如果你只是迁移表结构和数据&#xff0c;那么这个既简单又快下面…
阅读更多...
7月29（信息差）

7月29（信息差）

&#x1f30d;最强模型 Llama 3.1 如期而至&#xff01;扎克伯格最新访谈&#xff1a;Llama 会成为 AI 界的 Linux &#x1f384;谷歌AlphaProof攻克国际奥赛数学题 https://www.51cto.com/article/793632.html ✨SearchGPT第一波评测来了&#xff01;响应速度超快还没广告&…
阅读更多...
数据库练习4

数据库练习4

建库使用库 修改student 表中年龄(sage)字段属性&#xff0c;数据类型由int 改变为smallint 为Course表中Cno 课程号字段设置索引,并查看索引 为SC表建立按学号(sno)和课程号(cno)组合的升序的主键索引&#xff0c;索引名为SC_INDEX 创建一视图 stu info,查询全体学生的姓名&am…
阅读更多...
【Python学习手册（第四版）】学习笔记11.2-表达式语句（print函数）及打印操作（重定向等）详解

【Python学习手册（第四版）】学习笔记11.2-表达式语句（print函数）及打印操作（重定向等）详解

个人总结难免疏漏&#xff0c;请多包涵。更多内容请查看原文。本文以及学习笔记系列仅用于个人学习、研究交流。 主要介绍表达式语句&#xff08;print函数&#xff09;及打印操作&#xff08;重定向等&#xff09;。视需要选择目录阅读。 目录 表达式语句 错误示例&#xf…
阅读更多...
【React】常见的 HOC 使用案例

【React】常见的 HOC 使用案例

高阶组件&#xff08;Higher-Order Component&#xff0c;HOC&#xff09;是一种用于在 React 中复用组件逻辑的技术。以下是几个常见的 HOC 使用案例&#xff0c;以及详细的代码示例。 1. 日志记录 HOC 这个高阶组件将在每次组件更新时记录日志。 LoggingHOC.js import Re…
阅读更多...
python I 嵌套列表的多种展开方法

python I 嵌套列表的多种展开方法

python中&#xff0c;如何将嵌套列表展开形成一个列表。 一、嵌套列表格式 本文模拟的嵌套列表alis&#xff0c;如下&#xff1a; alis [[xx, yy], [2], [四, 4], [99]]嵌套列表alis&#xff0c;有以下特点&#xff1a; 1、嵌套列表alis&#xff0c;只有两层&#xff0c;格…
阅读更多...
环境如何搭建部署Nacos

环境如何搭建部署Nacos

这里我使用的是Centos7&#xff0c; Nacos 依赖 Java环境来运行。如果您是从代码开始构建并运行Nacos&#xff0c;还需要为此配置 Maven环境&#xff0c;请确保是在以下版本环境中安装使用 ## 1、下载安装JDK wget https://download.oracle.com/java/17/latest/jdk-17_linux-x6…
阅读更多...
最新文章

Copyright @ 2022~2023