使用 Ionic Vue 和 Electron 进行跨平台开发

Ionic Vue 是一个基于 Vue.js 的框架，可以快速构建移动应用程序。而 Electron 是一个基于 Web 技术的桌面应用程序开发框架，可以让你使用 JavaScript、HTML 和 CSS 构建跨平台应用程序。

在本文中，我们将使用 Ionic Vue 和 Electron 来构建一个跨平台的桌面应用程序，该程序可以在 Windows、macOS 和 Linux 上运行。

安装 Ionic Vue

我们首先需要安装 Ionic Vue。由于 Ionic Vue 是基于 Vue.js 的，所以你需要先安装 Vue CLI。

npm install -g @vue/cli

然后我们可以使用 Vue CLI 创建一个新的 Ionic Vue 项目。

vue create my-ionic-vue-app --preset=@ionic/vue

接下来根据提示选择需要安装的插件即可。

构建 Ionic Vue 应用程序

我们现在可以开始构建我们的 Ionic Vue 应用程序。

cd my-ionic-vue-app
npm run serve

这将启动一个本地开发服务器，你可以在浏览器中访问 http://localhost:8080/ 来查看应用程序的界面。

集成 Electron

现在我们已经有了一个 Ionic Vue 应用程序，下一步是将它打包成一个可执行文件，以便在桌面上运行。这就需要用到 Electron。

我们可以使用以下命令来安装 Electron。

npm install --save-dev electron

接下来，我们需要创建一个主进程文件 main.js。该文件将加载我们的应用程序并创建一个 Electron 窗口。

const { app, BrowserWindow } = require('electron')
const path = require('path')

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      enableRemoteModule: true,
    },
  })

  mainWindow.loadURL('http://localhost:8080/')

  mainWindow.webContents.openDevTools()
}

app.whenReady().then(() => {
  createWindow()

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

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

该文件使用 Electron API 来创建一个宽度为 800，高度为 600 的窗口。我们将加载 http://localhost:8080/，这是我们 Ionic Vue 应用程序的地址。我们还将打开开发者工具。

接下来，我们需要修改 package.json 以便 Electron 可以正确地启动我们的程序。

{
  "name": "my-ionic-vue-app",
  "version": "0.1.0",
  "main": "main.js",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "electron": "electron .",
    "start": "electron ."
  },
  "dependencies": {
    "@ionic/core": "^5.5.2",
    "@ionic/vue": "^5.5.2",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "electron": "^12.0.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue": "^3.0.0",
    "vue-template-compiler": "^2.6.11"
  }
}

我们将主文件设置为 main.js。

在 scripts 中，我们添加了两个新脚本：electron 和 start。 electron 将启动我们的应用程序， start 将在开发模式下启动应用程序。

我们现在可以运行 npm run electron 来启动我们的程序。

打包应用程序

最后一步是将我们的程序打包成一个可执行文件，以供用户下载和安装。

我们将使用 electron-builder 这个库来打包我们的程序。使用以下命令来安装它：

npm install --save-dev electron-builder

在我们的项目根目录下，我们需要创建一个 electron-builder.yml 文件。该文件定义了一些构建选项。

appId: com.example.my-ionic-vue-app
productName: My Ionic Vue App

directories:
  output: dist

files:
  - dist/**/*
  - node_modules/**/*

mac:
  target: dmg
  category: public.app-category.developer-tools
  icon: build/icon.icns

win:
  target: nsis
  icon: build/icon.ico

在这个配置文件中，我们定义了应用程序的 appId、productName 和输出目录。我们需要将 dist 目录下的文件和 node_modules 目录下的文件都打包进去。

我们还定义了一些特定于平台的选项，如 mac 和 win。在 mac 中，我们选择了将应用程序打包成 dmg 格式的安装文件，并定义了应用程序类别和图标。在 win 中，我们将应用程序打包成 nsis 格式的安装文件，并定义了应用程序图标。

最后，我们需要将以下命令添加到 scripts 中来进行应用程序打包：

{
  "scripts": {
    "build": "vue-cli-service build",
    "electron:build": "vue-cli-service build && electron-builder"
  }
}

现在我们可以使用以下命令来构建我们的应用程序。

npm run electron:build

构建完成后，你将在 dist 文件夹下找到应用程序的安装文件。

结论

现在你已经知道了如何使用 Ionic Vue 和 Electron 来构建跨平台应用程序。你可以使用这个方法开发 Windows、macOS 和 Linux 上的桌面应用程序。