Vue 3

如何使用 Vue 和 Electron Forge 创建 Electron 应用

可以通过一些简单的设置步骤将 Vue 3 添加到 Electron Forge 的 Vite 模板中。

以下指南已在 Vue 3 和 Vite 4 上进行了测试。

设置应用

使用 Electron Forge 的 Vite 模板创建一个 Electron 应用。

npm init electron-app@latest my-vue-app -- --template=vite

添加依赖项

将 vue npm 包添加到您的 dependencies 中，并将 @vitejs/plugin-vue 包添加到您的 devDependencies 中。

npm install vue
npm install --save-dev @vitejs/plugin-vue

集成 Vue 3 代码

现在您应该能够在 Electron 应用中开始使用 Vue 组件了。以下是开始添加 Vue 3 代码的一个非常简单的示例。

将 src/index.html 的内容替换为带有 #app id 属性的 <div> 元素。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World!</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/renderer.js"></script>
  </body>
</html>

将模板中的内容放回 src/App.vue 中。

<template>
  <h1>💖 Hello World!</h1>
  <p>Welcome to your Electron application.</p>
</template>

<script setup>
console.log('👋 This message is being logged by "App.vue", included via Vite');
</script>

使用 Vue 的 createApp API 将 App.vue 挂载到 DOM 上。

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

为 Vite.js 配置 Vue 插件。

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

// https://vite.vuejs.ac.cn/config
export default defineConfig({
  plugins: [vue()]
});

上一篇React + TypeScript 下一篇使用 WSL 开发

上次更新于 11 个月前