vue3+node.js+mysql+electron+express实现用户登录,文章写入删除,全量更新,增量更新,和截屏功能,前后端分离(1)elctron项目的创建
electron项目创建
·
第一件事情是安装node.js,去官网下,在终端node -v,npm-v有版本号就行了,不必搞环境配置,保姆级别教程,感谢哥有时间。嘻嘻,祝大家开心。
1.首先你要创建electron项目
打开vscode,新建终端
输入代码
npm init
这个代码是初始化的意思
会生成一个文件package.json
里面的代码应该是这样
{
"name": "my-electron-app", // 项目名称
"version": "1.0.0", // 当前版本号,遵循语义化版本规范
"description": "Hello World!", // 项目的简短描述
"main": "main.js", // 应用程序的主入口文件
"author": "Jane Doe", // 作者名称
"license": "MIT" // 项目使用的许可证类型
}
你们的没有注释。
下载electron,我用的是electron@18.0.0,我对版本的建议是用旧不用新。安装特定版本在后面加@版本号。卸载就吧install换成uninstall。下载完成会出现node_modules,这是你下载的包和依赖存储的地方,模块函数都是从这导入的。
如果你深入学习it技术,你会发现其实都是封装,我们调用api接口,或者我们自己写一个js实现功能,然后调用它,就像电脑里面有很多东西,但是它只暴露usb接口,耳机孔,你只要使用接口就行了,node.js,electron大部分模块使用就是如此,你大部分安装的包也是基于封装。
npm install --save-dev electron
在您的 package.json配置文件中的scripts
字段下增加一条start
命令:这是用来启动的,其实就是执行脚本。
{
"scripts": {
"start": "electron ."
}
}
然后打开它,终端输入命令
npm start
会报错,因为没有主文件,在根目录创建一个main.js,在运行。没有报错了,但是也没有窗口,因为你没创建。在main.js中加入代码。
// 从 Electron 模块中导入 app 和 BrowserWindow 对象
const { app, BrowserWindow } = require('electron');
const path = require('node:path');
const createWindow = () => {
// 创建浏览器窗口
const mainWindow = new BrowserWindow({
width: 800, // 设置窗口的宽度为 800 像素
height: 600,// 设置窗口的高度为 600 像素
webPreferences: {
preload: path.join(__dirname, 'preload.js'), // 预加载脚本
},
});
// 加载 index.html 文件
mainWindow.loadFile('index.html');
// 打开开发者工具(如果需要,可以取消注释)
// mainWindow.webContents.openDevTools();
};
// 当 Electron 完成初始化并准备创建浏览器窗口时调用此方法
// 部分 API 只有在 ready 事件触发后才能使用
app.whenReady().then(() => {
createWindow();
app.on('activate', () => {
// 在 macOS 系统中,如果没有已打开的窗口,点击应用图标时会重新创建一个新窗口
if (BrowserWindow.getAllWindows().length === 0) createWindow();
});
});
// 除了 macOS 外,当所有窗口都被关闭时退出应用
// 对于 macOS 应用程序及其菜单栏,通常会保持激活状态,直到用户使用 Cmd + Q 明确退出
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit();
});
// 在这个文件中,你可以引入所有的主进程代码
// 你也可以将代码拆分成几个文件,然后使用 require 导入
执行终端运行
恭喜你成功的创建了一个electron项目,很简单吧,下一节课我会教你们接口暴露,和页面创建,因为这是出于node.js和electron的安全策略,它禁止渲染进程直接调用主进程的接口函数。
更多推荐
已为社区贡献1条内容
所有评论(0)