网站建设经济可行性报告非凡网站开发培训

前提条件

• 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 应用程序。