vue3+node.js+mysql+electron+express实现用户登录，文章写入删除，全量更新，增量更新，和截屏功能，前后端分离（1）elctron项目的创建

第一件事情是安装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的安全策略，它禁止渲染进程直接调用主进程的接口函数。