一、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.1 C:\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_global C:\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/www
GET / 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.2s
devDependencies:
+ 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:
1
at 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 双击一键安装