Vite、Vue3、TypeScript、Electron 和 pnpm 搭建项目

什么是 Vite?

Vite 是一个快速，免费的 Web 开发工具，主要用于原型开发、辅助调试和小型项目。它使用现代浏览器原生 ES 模块导入，可以更快地加载应用程序，并在开发时进行热更新。

什么是 Vue3?

Vue3 是一个现代化的 JavaScript 框架，旨在让您更轻松地构建大规模的应用程序。它提供了许多更新，包括提高了性能、更好地利用TypeScript、更简单的组合 API 和更好的优化。

什么是 TypeScript?

TypeScript 是一种类型安全且易于学习和使用的编程语言，它是 JavaScript 的超集。TypeScript 将 JavaScript 引入了类型系统，以帮助开发人员编写更安全和更可靠的代码，它提供了更好的工具支持和更好的代码块，有助于减少出错的可能性。

什么是 Electron?

Electron 是一个使用 Web 技术构建基于 Chromium 和 Node.js 的跨平台桌面应用程序的框架，可以使用 HTML、CSS 和 JavaScript 来构建桌面应用程序，并提供强大的 API 和工具。虽然 Electron 本身不依赖于任何特定的前端框架，但它越来越多地与 Vue3 一起使用。

什么是pnpm

pnpm是Node.js的一个包管理器，它可以用于替代npm和yarn。

初始化项目

首先，在你的计算机上安装最新的Node.js和pnpm。

创建一个新项目：

pnpm create vite my-project

安装依赖

cd my-project
pnpm install
pnpm add @types/node cross-env electron electron-builder vite-plugin-electron vite-plugin-electron-renderer -D

配置文件

vite.config.ts:

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";
import electron from "vite-plugin-electron";
import electronRenderer from "vite-plugin-electron-renderer";

export default defineConfig({
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
  plugins: [
    vue(),
    electron([
      {
        entry: "electron/main/index.ts",
        onstart(options) {
          options.startup();
        },
        vite: {
          build: {
            outDir: "dist-electron/main",
          },
        },
      },
      {
        entry: "electron/preload/index.ts",
        onstart(options) {
          options.reload();
        },
        vite: {
          build: {
            outDir: "dist-electron/preload",
          },
        },
      },
    ]),
    electronRenderer(),
  ],
});

package.json:

{
  "name": "electron-test",
  "private": true,
  "version": "0.0.0",
  "main": "dist-electron/main/index.js",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build && electron-builder",
    "preview": "vite preview"
  },
  "dependencies": {
    "element-plus": "^2.3.3",
    "normalize.css": "^8.0.1",
    "pinia": "^2.0.34",
    "sortablejs": "^1.15.0",
    "vue": "^3.2.47"
  },
  "devDependencies": {
    "@types/node": "^18.15.11",
    "@vitejs/plugin-vue": "^4.1.0",
    "cross-env": "^7.0.3",
    "electron": "^24.1.2",
    "electron-builder": "^23.6.0",
    "sass": "^1.62.0",
    "typescript": "^4.9.3",
    "vite": "^4.2.0",
    "vite-plugin-electron": "^0.11.2",
    "vite-plugin-electron-renderer": "^0.14.1",
    "vue-tsc": "^1.2.0"
  }
}

创建主进程

在Electron中，主进程是启动应用程序的部分，同时也是与系统进行交互的部分。在我们的项目中，我们将使用TypeScript编写主进程代码。

在项目根目录下创建一个新文件夹 electron/main 以及 electron/main/index.ts 文件，这是我们的主进程文件。

在 index.ts 文件中添加以下内容：

import { app, BrowserWindow } from "electron";
import path from "path";
const createWindow = () => {
  const win = new BrowserWindow({
    width: 1000,
    height: 800,
    show: false,
    webPreferences: {
      // contextIsolation: false, // 是否开启隔离上下文
      // nodeIntegration: true, // 渲染进程使用Node API
      preload: path.join(__dirname, "../preload/index.js"),
    },
  });

  // 发布时需换成生产域名
  win.loadURL(`http://localhost:5173/`);

  // 等页面加载完打开
  win.once("ready-to-show", () => {
    win.show();
  });

};

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代码相似，但在我们的窗口实例化中，我们使用了Vite提供的热重载机制。

创建预加载脚本

在项目根目录下创建一个新文件夹 electron/preload 以及 electron/preload/index.ts 文件，这是我们的主进程文件。

import { ipcRenderer, contextBridge } from "electron";
const showMsgBox = (args) => {
  ipcRenderer.invoke("on-show-msg-box", args);
};
const save = (args) => {
  ipcRenderer.invoke("on-save", args);
};
contextBridge.exposeInMainWorld("electronApi", {
  save,
  showMsgBox,
});

预加载（preload）脚本包含了那些执行于渲染器进程中，且先于网页内容开始加载的代码 。 这些脚本虽运行于渲染器的环境中，却因能访问 Node.js API 而拥有了更多的权限。

打包和部署应用程序

在项目根目录下创建一个electron-builder.json5文件，配置如下:

/**
 * @see https://www.electron.build/configuration/configuration
 */
{
  appId: "com.electron.desktop",
  productName: "electron",
  asar: true,
  copyright: "Copyright © 2023 electron",
  directories: {
    output: "release/${version}",
  },
  files: ["dist-electron", "dist"],
  mac: {
    artifactName: "${productName}_${version}.${ext}",
    target: ["dmg"],
  },
  win: {
    target: [
      {
        target: "nsis",
        arch: ["x64"],
      },
    ],
    artifactName: "${productName}_${version}.${ext}",
  },
  nsis: {
    oneClick: false,
    perMachine: false,
    allowToChangeInstallationDirectory: true,
    deleteAppDataOnUninstall: false,
  },
}

完成开发后，我们可以通过以下命令来打包我们的应用程序：

pnpm build

结论

在本文中，我们介绍了如何使用 Vite、Vue3、TypeScript、Electron 和 pnpm 搭建、开发、打包和部署一个前端项目。这个技术栈能够为前端开发人员提供更好的性能、代码质量和编辑器支持。希望本文对你有所帮助！