Vue 3+Vite+Eectron从入门到实战系列之(三)一Electron热身运动(一)

前面我们已经把基础环境配置好了，在开始我们编写第一个页面之前，先尝试几个小的实验，体验下 electron 的乐趣。

更改我们应用的名称

系统默认的名字是从 package.json 中读取的，我们可以在这里更改。

{
   
  "name": "electron-vue3"
}

更改后，我们重新启动应用，在任务栏中可以看到我们更改后的名字。

如果没有生效，那可以在 html 中看看 title 是否有值，title 的值会覆盖 package.json 中的 name 值。
删掉 title 的值，重新启动应用。即可看到更改后的应用名称。

每次改名字都要到 index.html 中改，太麻烦。那就删除 title 的值，在主进程文件 main.js 中更改。

// main.js
win = new BrowserWindow({
   
  width: 800,
  height: 600,
  webPreferences: {
   
    preload: path.join(__dirname, "preload.js"),
  },
  title: "人资管理系统",
});

同理应用 icon 图标，在 main.js 中更改。图标大小是有要求的，必须是 256x256 的尺寸，否则会报错，会有提示信息，问题不大。

win = new BrowserWindow({
   
  icon: path.join(__dirname, "../public/favicon.ico"),
});

读取系统信息

在我们的渲染进程里面，我们可以通过 process 对象来获取应用版本号、系统信息等。
preload.js 里面添加代码

window.addEventListener("load", () => {
   
  const replaceText = (selector, text) => {
   
    const element = document.getElementById(selector