前提条件
- 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 应用程序。
