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

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

news 文章来源：https://blog.csdn.net/weixin_45631815/article/details/140826053 2025/1/18 4:43:14

一、node.js

（一）、下载

下载地址

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

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

（二）、安装

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

第一步增加系统变量

（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

第二步增加用户变量

E:\Program Files\nodejs\node_global

检查安装情况

node -v

npm - v

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

配置缓存目录和全局目录

缓存目录

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
```
设置国内源配置（参考文档的镜像源已经不可用）

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

如果不行在换一个

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

删除npm config delete registry

使用pnmp方式安装

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

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

二、Express

express使用

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

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

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

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 提供的。
安装成功

D:\it\node20\node_cache\node_modules>express --version
4.16.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.');
});

(四)、编译安装包

安装electron-builder

pnpm install electron-builder --save-dev

在package.json中添加构建脚本

"scripts": {"start": "electron .","dist": "electron-builder"
}

main改为main.js

"main": "main.js",

运行构建命令

Windows :pnpm run dist --win

macos:pnpm run dist --mac

Linux:pnpm run dist --linux

失败了，如果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.

手动下载

迅雷下载

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。

重写执行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

可执行文件运行

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

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

一、node.js （一）、下载下载地址 Node.js — 在任何地方运行 JavaScript (nodejs.org) 参考文章：Node.js安装及环境配置超详细教程【Windows系统】_windows 安装nodejs-CSDN博客 （二）、安装安装路径可以更换&a…...

编程日记 2024/8/1 22:02:25

solidity多态【很重要】

多态是面向对象编程（OOP）的一个核心概念，允许不同类的对象被视为同一类型的实例，并根据实际类型来响应相同的方法调用。这意味着同一个接口可以用来引用属于不同类的对象，而这些对象可以有自己的方法实现&#xff0c…...

编程日记 2024/8/1 21:59:22

Jangow-1.0.1靶机漏洞复现(未完成)

首先，这个靶机只能使用VirtualBox打开，靶机下载地址为 https://download.vulnhub.com/jangow/jangow-01-1.0.1.ova 虚拟机软件下载地址为 Download_Old_Builds – Oracle VM VirtualBox 开启靶机后访问ip进入如下页面，点击site进入到一个…...

编程日记 2024/8/1 21:58:21

软件测试--python基础

一、python基础 (1)第一个python (2)python解释器 (3)基础语法 ①字面量什么是字面量常用的值类型字符串 ②注释 ③变量什么是变量变量的特征变量的目的是存储运行过程的数据存储的目的是为了：重复使用 ④数据类型 type()语句变量有类型吗？…...

编程日记 2024/8/1 21:57:20

GPIO子系统

1. GPIO子系统视频概述 1.1 GPIO子系统的作用芯片内部有很多引脚，这些引脚可以接到GPIO模块，也可以接到I2C等模块。通过Pinctrl子系统来选择引脚的功能(mux function)、配置引脚： 当一个引脚被复用为GPIO功能时，我们可以去设…...

编程日记 2024/8/1 21:55:18

学会这个Python库，接口测试so easy

前言我们在做接口测试时，大多数返回的都是json属性，我们需要通过接口返回的json提取出来对应的值，然后进行做断言或者提取想要的值供下一个接口进行使用。但是如果返回的json数据嵌套了很多层，通过查找需要的词，就…...

编程日记 2024/8/1 21:54:16

Stable Diffusion4.8.7（Ai绘画）软件安装教程

软件下载 [名称]：Stable Diffusion4.8.7（Ai绘画） [大小]：16.52GB [语言]：简体中文 [安装环境]：Win11/Win10/Win8/Win7 [硬件要求]：CPU2.0GHz ，内存4G（或更高&#x…...

编程日记 2024/8/1 21:53:14

操作系统错误处理

错误处理 1、通过函数的返回值表示执行错误： // 返回合法值表示成功返回非法值表示失败 // 计算大小、查找 long file_size(const char* path) {FILE* fp fopen(path,"r");if(NULL fp)return -1; // 返回非法值fseek(fp,SEEK_END,0);long size …...

编程日记 2024/8/1 21:52:12

【靶场实操】sql-labs通关详解----第一节：基础注入方式（Less-1～Less-10）

目录一、注入方式简要概括 1.1 SQL常见注入方式 1.2 爆破函数二、靶场实操 2.1 Less-1 2.1.1 判断类型 2.1.2 联合注入查询 2.2 Less-2 2.2.1 判断类型 2.2.2 注入攻击 2.2.3 字符型与数字型漏洞对比 2.3 Less-3 2.3.1 判断 2.3.2 注入 2.4 Less-4 2.4.1 判断…...

编程日记 2024/8/1 21:50:10

力扣676.实现一个魔法字典字典树 dfs class Trie{public:Trie* next[26];bool is_end false;};class MagicDictionary {public:Trie* root new Trie();void add(string& word){Trie* p root;for(char c:word){if(p->next[c-a] NULL) p->next[c-a] new Trie…...

编程日记 2024/8/1 21:49:09

ctfshow-web入门-sql注入（web171-web175）

目录 1、web171 2、web172 3、web173 4、web174 5、web175 1、web171 单引号测一下，报错 -- 闭合后回显正常也可以用 # ，不过需要 URL 编码成功闭合之后，先判断下字段数： 1 order by 3-- 3 的时候正常 4 的时候报错&am…...

编程日记 2024/8/1 21:48:07

视频怎么添加音乐？分享5种视频添加音乐方法

在如今火爆的短视频时代，为视频添加合适的背景音乐，无疑是让其脱颖而出的关键一步。无论是打造个人Vlog、纪录片，还是创意短片，音乐都能赋予视频独特的情感与氛围。那么怎么给视频添加上背景音乐呢？给大家分享5种简单的…...

编程日记 2024/8/1 21:46:03

黑马JavaWeb后端案例开发（包含所有知识点！！！）

目录 1.准备工作环境搭建开发规范 REST（REpresentation State Transfer）,表述性状态转换，它是一种软件架构风格注意事项统一响应结果 2.部门管理功能查询部门删除部门新增部门 RequestMapping 3.员工管理功能分页查询批…...

编程日记 2024/8/1 21:44:01

FPGA开发——蜂鸣器实现音乐播放器的设计

一、概述我们在进行蜂鸣器的学习的时候，总会在想既然蜂鸣器能够发出声音，那么它能够播放音乐吗，今天这篇我们文章我们就一起来学习怎样使用使用蜂鸣器来播放音乐，也就是怎样成为一个音乐播放器。 1、蜂鸣器的类型在设计的时候…...

编程日记 2024/8/1 21:43:00

InnoDB存储引擎(1)

InnoDB存储引擎的优点 InnoDB在设计时考虑到了处理大数据量时的性能，支持事务，回滚和崩溃修复的能力，通过多版本并发控制来减少锁定(降低了锁的争用),同时还支持外键的约束；通过缓冲池在内存中缓存数据来提高查询的性能&#xff…...

编程日记 2024/8/1 21:41:59

VMWare虚拟机共享主机的网络访问外网

1.主机中启动客户端并连接外网 2.设置虚拟网络类型为NAT 3.启动虚拟并通过主机访问外网...

编程日记 2024/8/1 21:40:58

LeetCode Easy｜【415. 字符串相加】

力扣题目链接题目本身难度不大，但是后续的一些补充内容还是值得搞清楚的主要的逻辑如下： 其实本题的目的就是让我们来模拟我们的竖式加法。所以很直观的一个想法就是使用双指针：分别指向两个 num 的末尾。随后就会产生一些问题&#xff1a…...

编程日记 2024/8/1 21:38:55

RAG 革命：NVIDIA 工作站如何成为企业 AI 的秘密武器

在深圳的一家科技初创公司，首席技术官李梅正在向她的团队展示一个令人兴奋的新项目。“看这个，” 她指着屏幕上的实时演示说，“我们刚刚用公司的技术文档训练了一个 AI 助手，它现在可以回答任何关于我们产品的问题，而且…...

编程日记 2024/8/1 21:36:53

九大原则，轻松构建个人高效SOP

1、原则一、工作汇报SOP SCQA模型(升职加薪的关键!） 清晰定义问题和提出解决方案类别关键词解读 S - Situation 情景陈述项目背景，目标，愿景 C - Complication 冲突讲卡点，讲冲突 Q - Question 疑问-问题这些冲…...

编程日记 2024/8/1 21:34:51

Airtest的demo实现多设备并行

Airtest的demo实现多设备并行它实现是的获取adb连接上的所有设备，然后在每一台设备上跑给定的测试用例，跑完之后生成单机的测试报告，最后再汇总这些单机测试报告的结果，形成汇总（聚合）报告： 同…...

编程日记 2024/8/1 21:32:49

社区养老服务小程序的设计

管理员账户功能包括：系统首页，个人中心，用户管理，服务人员管理，服务产品管理，服务预约管理，服务状态管理，服务退订管理，活动管理，视频管理微信端账号功能包…...

编程日记 2024/8/1 21:31:47

Interceptor拦截器开发

因为1登录后的接口都需要token验证代码，会出现重复代码；2当前的接口不防刷，会被恶意攻击所以在controller层增加请求拦截，如果你的token不合法，就不让你做后续的处理了拦截器的作用是什么作用： 1、对controller层代码的访问进行拦截，合法的请求，那此层代码就处理，反…...

编程日记 2024/8/1 21:30:46

美团 AIGC产品经理面经（已拿 offer）

背景：211本科毕业，毕业之后在北京一家中型电商公司做了3年商家后台产品经理，目前通过老薛的朋友关系拿到了美团的offer。目前还有几家在面试流程中，继续加油💪 美团AIGC产品面经-业务面 💥1、自我介绍&a…...

编程日记 2024/8/1 21:29:45

@RequestBody与@RequestParam

RequestBody会将请求体中的数据，转换成对象.最主要的是RequestBody就是要返回Json的字符串！！！ RequestParam会从http请求查询参数中提取数据！ RequestParam和RequestBody是Spring Framework中用于处理HTTP请求的注解…...

编程日记 2024/8/1 21:27:43

vmware上，虚机经常丢失网卡。导致无法上网。

1、winR 输入 services.msc 2、重启这两个服务。 VMware NAT service和VMware DHCP service...

编程日记 2024/8/1 21:25:41

git 鉴权失败

这条错误信息通常出现在使用Git进行远程操作时，比如克隆仓库、拉取更新或推送代码。错误的含义是： HTTP Basic: Access denied：访问被拒绝。The provided password or token is incorrect：提供的密码或令牌不正确。Your account …...

编程日记 2024/8/1 21:24:40

[C++] 容器适配器：深入理解Stack与Queue的底层原理

文章目录容器适配器简介deque的缺陷为什么使用deque作为stack和queue的底层默认容器 stack和queue的简单讲解Stack（栈）栈的操作图示栈的相关接口 Queue（队列） Stack和Queue的模拟实现Stack（栈）作为容器适配…...

编程日记 2024/8/1 21:23:39

Eclipse maven 的坑

在使用 eclipse 时， eclipse 的右下角一直在提示 “JPA java change event handler” ，eclipse使用起来很卡，解决办法问题描述： 在使用 eclipse时， eclipse 的右下角一直在提示 “JPA java change event handler”…...

编程日记 2024/8/1 21:22:38

多模态视觉大语言模型——LLaVA

论文题目：Visual Instruction Tuning 论文地址：https://arxiv.org/abs/2304.08485 github: https://github.com/haotian-liu/LLaVA 1. Abstract 本文首次尝试使用GPT-4生成多模态指令数据，并基于这些数据训练了LLaVA(Large Language and Vision Assistant)模型，这是一种结…...

编程日记 2024/8/1 21:21:37

服务注册到nacos上，不能点击下线的问题处理

nacos不能下线： 修改 /usr/local/mid/nacos/data 文件夹下 protocol 文件重命名为 protocol_bak，然后再重启nacos nacos单机启动命令：cd sh startup.sh -m standalone nginx启动命令：cd /usr/local/mid/nginx/sbin ./…...

编程日记 2024/8/1 21:20:36

购物网站开发公司/黑马培训机构可靠吗

转载于:https://www.cnblogs.com/joshuali/archive/2009/08/31/4339130.html...

编程日记 2025/1/18 4:16:48

关于申请拨付政府网站群建设项目/影视后期培训机构全国排名

可以将 Ignite 用作现有数据库（例如 RDBMS 或 NoSQL 数据库，例如 Apache Cassandra 或 MongoDB）之上的缓存层。这个用例通过使用内存处理来加速底层数据库。 Ignite 提供与 Apache Cassandra 的开箱即用集成。对于其他没有现成集成的 NoSQL 数…...

编程日记 2025/1/18 3:25:36