前提條件

• Node.js: 確保已安裝 Node.js 版本 18 或更高版本 (推薦使用最新穩定版)。
• Vite: 確保 Vite 版本為 4.0 或以上。
• 包管理工具: 推薦使用 pnpm，但也可以使用 npm 或 yarn。

安裝 Electron-Vite

首先，在項目中安裝 electron-vite 作為開發依賴：

npm install electron-vite --save-dev

或者使用 pnpm：

pnpm add electron-vite -D

創建項目

使用 @quick-start/electron 腳手架來創建新的 Electron 項目：

pnpm create @quick-start/electron

接下來，按照提示進行選擇和配置：

• Project name: 輸入項目名稱，例如 my-electron-app。
• Select a framework: 選擇 vue。
• Add TypeScript?: 根據需要選擇 Yes 或 No。如果打算使用 TypeScript，選擇 Yes。
• Add Electron updater plugin?: 計劃在發布后更新應用，選擇 Yes 來添加更新插件。
• Enable Electron download mirror proxy?: 在國內并且需要加速 Electron 的下載，可以選擇 Yes。

完成上述步驟后，腳手架將會自動搭建好項目結構。

安裝 Vue Router

npm install vue-router@next

或者使用 pnpm：

pnpm add vue-router@next

配置 Vue Router

在項目的 src 目錄下創建一個名為 router 的文件夾，并在其中創建一個 index.js 文件。此文件配路由規則：

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'const routes = [{path: '/',name: 'Home',component: Home},// 其他路由規則...
]const router = createRouter({history: createWebHistory(process.env.BASE_URL),routes
})export default router

主應用文件（ main.js ）中引入并使用這個路由器：

// src/main.js or main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'createApp(App).use(router).mount('#app')

啟動項目

npm run dev

或者使用 pnpm：

pnpm run dev

如果一切設置正確，能夠看到Electron 應用程序。