vue3+ts+vite+electron搭建桌面应用的过程

下面是关于使用Vue3、TypeScript、Vite和Electron搭建桌面应用的完整攻略。

搭建步骤

1. 创建项目工程

首先需要安装Vite脚手架，在终端中输入以下命令安装：

npm install -g create-vite-app

安装完成后，通过以下命令创建项目工程：

create-vite-app my-project

此时会询问你需要使用哪种模板，这里选择Vue 3和TypeScript。然后根据提示操作即可。

2. 集成Electron

接下来，需要把Vue项目改造为Electron应用。先安装以下依赖：

npm install -D electron @types/electron

安装完成后，在项目的根目录下创建一个名为main.js的文件，内容如下：

const { app, BrowserWindow } = require('electron')
const path = require('path')

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      enableRemoteModule: true,
    },
  })

  win.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

在package.json文件中添加一条"main"字段，指向刚创建的main.js文件：

{
  "main": "main.js",
  // ...
}

接下来，可以尝试在终端中运行以下命令启动Electron应用：

npm run electron

此时，Electron应用会打开一个为空的窗口，表示已经成功集成到项目中。

3. 集成Vue Router

为了方便页面间的跳转，需要集成Vue Router。先安装以下依赖：

npm install vue-router@next
npm install -D @types/vue-router

在src目录下创建一个名为router.ts的文件，内容如下：

import { createRouter, createWebHashHistory } from 'vue-router'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('./views/Home.vue'),
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('./views/About.vue'),
  },
]

const router = createRouter({
  history: createWebHashHistory(),
  routes,
})

export default router

在main.ts文件中引入router并注入：

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

const app = createApp(App)

app.use(router)
app.mount('#app')

4. 打包和发布应用

最后一步是打包和发布应用。在package.json文件中添加以下脚本命令：

{
  "scripts": {
    "build": "vite build && electron-builder",
    "release": "vite build && electron-builder --publish always"
  }
}

其中，electron-builder是一个打包工具，always表示每次发布应用都会更新，也可以设置成latest。

执行以下命令进行打包：

npm run build

该命令会生成一个名为dist的目录，其中的文件就是应用程序的打包文件，在不同平台和操作系统上均可运行。

如果要发布应用，可以执行以下命令：

npm run release

该命令会把打包好的文件上传至GitHub Release，并生成一个名为latest.yml的文件以便自动更新应用程序。

示例说明

示例一：添加新页面

在src/views目录下新建一个名为Foo.vue的文件，内容如下：

<template>
  <h1>Foo Page</h1>
</template>

在src/router.ts文件中添加以下路由：

{
  path: '/foo',
  name: 'Foo',
  component: () => import('./views/Foo.vue'),
},

此时，在应用程序中就可以通过/foo进行跳转，访问新页面了。

示例二：添加菜单

在main.js文件中添加以下代码：

const { Menu } = require('electron')

const template = [
  {
    label: 'File',
    submenu: [{ role: 'quit' }],
  },
  {
    label: 'Edit',
    submenu: [
      { role: 'undo' },
      { role: 'redo' },
      { type: 'separator' },
      { role: 'cut' },
      { role: 'copy' },
      { role: 'paste' },
      { role: 'delete' },
      { role: 'selectAll' },
    ],
  },
]

const menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)

这段代码会添加菜单栏，包括文件和编辑两个菜单，分别包含退出、撤销、恢复、剪切、复制、粘贴、删除和全选等功能。在菜单栏中就可以方便地进行不同操作。