浅尝 Electron + Vue3 项目创建

前言

在电脑我们经常使用的浏览器、听歌软件、vscode等等都是电脑的桌面应用，相对于手机上的应用，桌面应用的硬件资源、内存、带宽等方面都得以充分利用，能够支持更复杂的运行与处理。而作为一名前端开发，正好可以选择 Electron 进行开发桌面应用。

介绍

Electron 是一个使用 JavaScript、HTML 和 CSS 构建跨平台的桌面应用程序。它基于 Node.js 和 Chromium，被 Atom 编辑器和许多其他应用程序使用。Electron 兼容 Mac、Windows 和 Linux，可以构建出三个平台的应用程序。

Electron 文档

安装

首先使用npm init vue@latest来创建一个 Vue3 的项目。

创建完成后，使用 npm install electron -D 来安装 Electron。

Electron 安装问题

js 复制代码

npm install electron -D
// 安装的过程中我们可能会遇到安装卡顿住一动不动，过了好几分钟还是没安装好，或者是下载总是出现不知名错误，很可能是网络环境问题。

这个时候我们可以切换其它源来解决这个问题，例如使用淘宝源。

例如我现在使用的是 npm，使用命令 npm config get registry，会显示如下：

js 复制代码

https://registry.npmjs.org/

切换源，在终端使用命令 npm config set registry https://registry.npm.taobao.org，再使用命令 npm config get registry，会显示如下：

js 复制代码

https://registry.npm.taobao.org/
// 这个时候证明切换成功了

输入命令：get-executionpolicy

然后：set-executionpolicy remotesigned

然后更改权限为 A

然后命令：get-executionpolicy

vscode 终端

这个时候我用的编辑器是 vscode，我使用 cnpm 命令的时候出现这个问题

我们可以到电脑搜索 PowerShell，右键选择以管理员身份运行。

输入命令 get-executionpolicy

接着输入 set-executionpolicy remotesigned

然后选择 A

最后命令：get-executionpolicy

然后我们就可以愉快的在 vscode 上使用 cnpm 了。

配置

在安装完我们所需的 Electron后，需要在我们创建的项目中进行一些配置。

main.ts、preload.ts

我们现在项目根目录创建 main.ts、preload.ts 文件。

ts 复制代码

// main.ts
// 控制应用生命周期和创建原生浏览器窗口的模组
const { app, BrowserWindow } = require('electron')
const path = require('path')

function createWindow () {
  // 创建浏览器窗口
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  // 加载 index.html
  // 在官方案例中展示的是 index.html 的内容
  // mainWindow.loadFile('index.html')
  mainWindow.loadURL('http://127.0.0.1:5173/')

  // 打开开发工具
  // mainWindow.webContents.openDevTools()
}

// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {
  createWindow()

  app.on('activate', function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

js 复制代码

// preload.ts
// 所有Node.js API都可以在预加载过程中使用。
// 它拥有与Chrome扩展一样的沙盒。
window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

  for (const dependency of ['chrome', 'node', 'electron']) {
    replaceText(`${dependency}-version`, process.versions[dependency])
  }
})

package.json

在 scripts 下配置 Electron 的启动命令 npm start。

"start": "electron .",

sql 复制代码

"scripts": {
    "start": "electron .",
    "dev": "vite",
    "build": "run-p type-check \"build-only {@}\" --",
    "preview": "vite preview",
    "build-only": "vite build",
    "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false"
},

初次启动

Electron 进行桌面端开发，首先需要一个窗口展示内容。

我们先运行启动 Vue 的项目，得到地址 http://127.0.0.1:5173/

再将这个地址放在我们创建的 main.ts 文件中。

js 复制代码

// 在这个函数中 mainWindow 里有 loadURL 启动url
function createWindow () {
  // 创建浏览器窗口
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })
  
  // ---------------------- 修改部分
  // mainWindow.loadFile('index.html')
  mainWindow.loadURL('http://127.0.0.1:5173/')

  // 打开开发工具
  // mainWindow.webContents.openDevTools()
}

然后运行命令 npm start 就会弹出如下窗口：

可以看出内容展示的是 vue 项目里的内容。在 vue 中修改内容，会同步到 Electron 窗口中。