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.dev.org.tw/config
export default defineConfig({
  plugins: [vue()]
});

上一篇React with TypeScript 下一篇Developing with WSL

最後更新時間 11 個月前