创建项目

安装必要的插件

UI 库 element-plus

npm install element-plus --save

安装 element-plus 图标

npm install @element-plus/icons-vue

安装插件 – 自动注册组件 vs 自动导入框架方法

npm install -D unplugin-vue-components unplugin-auto-import

electron.vite.config.ts 中添加

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

plugins 中添加

AutoImport({
        // 解析的文件类型
        include: [
          /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
          /\.vue$/,
          /\.vue\?vue/, // .vue
          /\.md$/ // .md
        ],
        // 需自动导入方法的库
        imports: ['vue'],
        resolvers: [ElementPlusResolver()]
      }),
      Components({
        resolvers: [ElementPlusResolver()]
      })

src/renderer/src/main.ts 中添加

import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

CSS框架 unocss

npm i -D unocss

electron.vite.config.ts 中添加

import UnoCSS from 'unocss/vite'

plugins 中添加

UnoCSS(),

src/renderer/src/main.ts 中添加

import 'virtual:uno.css'

自动路由 unplugin-vue-router

先安装 vue-router 4

npm install vue-router@4

再安装 unplugin-vue-router

npm i -D unplugin-vue-router

electron.vite.config.ts 中添加

import VueRouter from 'unplugin-vue-router/vite'
import { VueRouterAutoImports } from 'unplugin-vue-router'

plugins 中添加

// VueRouter  必须在 vue() 之前
VueRouter({
  routesFolder: [
    {
      // 此处重置了默认的自动路由的目录
      src: 'src/renderer/src/pages'
    }
  ],
  extensions: ['.vue']
}),

AutoImport 的 imports 中添加 VueRouterAutoImports

// 需自动导入方法的库
imports: ['vue', VueRouterAutoImports],

新建文件 src/renderer/src/router/index.ts

import { createRouter, createWebHashHistory } from 'vue-router'
import { routes, handleHotUpdate } from 'vue-router/auto-routes'

export const router = createRouter({
  // 此处需用 Hash 模式，否则打包后路由会失效
  history: createWebHashHistory(import.meta.env.BASE_URL),
  routes: [
    // 默认跳转到登录页
    {
      path: '/',
      redirect: '/login'
    },
    ...routes
  ]
})

// 支持热更新
if (import.meta.hot) {
  handleHotUpdate(router)
}

src/renderer/src/main.ts 中添加

import { router } from './router'
app.use(router)

src/renderer/src/App.vue 修改为

<template>
  <router-view></router-view>
</template>

自定义全局样式

src/renderer/src/assets 中只留 main.css，内容为

html,
body {
  margin: 0;
}

.drag {
  -webkit-app-region: drag;
}

src/renderer/src/main.ts 中添加

import './assets/main.css'

自定义Logo图标

  1. 将 resources/icon.png 替换为自定义图标
  2. 将 src/renderer/src/main.ts 中的 ...(process.platform === 'linux' ? { icon } : {}), 改为 icon: icon,

electron-vite【实战系列教程】_自定义

自定义标题

src/renderer/src/main.ts 中，在窗口的 ready-to-show 事件中执行 setTitle

mainWindow.on('ready-to-show', () => {
    // 自定义标题
    mainWindow.setTitle('EC编程俱乐部')
    mainWindow.show()
  })

electron-vite【实战系列教程】_css_02

创建托盘(含自定义托盘提示和快捷菜单)

src/renderer/src/main.ts 中新增导入 Tray 和 Menu

import { app, shell, BrowserWindow, ipcMain, Tray, Menu } from 'electron'

const mainWindow 后添加

// 托盘
  const tray = new Tray(icon)

  const contextMenu = [
    {
      label: '退出',
      click: function () {
        app.exit()
      }
    }
  ]

  const menu = Menu.buildFromTemplate(contextMenu)

  tray.setToolTip('EC编程俱乐部')

  tray.setContextMenu(menu)

  tray.on('click', () => {
    // 使窗口显示在任务栏中
    mainWindow.setSkipTaskbar(false)
    mainWindow.show()
  })

效果如下：

项目启动后，在系统托盘栏会出现托盘，鼠标悬浮时，显示 setToolTip 的提示信息

electron-vite【实战系列教程】_ico_03

右键快捷菜单为 contextMenu 中定义的数组，点击退出，会关闭项目。

electron-vite【实战系列教程】_electron_04

渲染进程向主进程发消息

渲染进程 vue 文件 —— ipcRenderer.send 发出事件 quite

// 无参数时，第二个参数可以不传
window.electron.ipcRenderer.send('quite', '退出程序')

主进程 src/main/index.ts —— ipcMain.on 响应事件 quite

// 第一个参数 e 是事件对象，第二个参数 data 是传递过来的数据
  ipcMain.on('quite', (e, data) => {
    console.log(data) // 主进程控制台会打印：退出程序
    // 因用到了 mainWindow ，所以需写在 createWindow 函数中 const mainWindow 的后面
    mainWindow.close()
  })

主进程向渲染进程发消息

主进程 src/main/index.ts —— 目标窗口.webContents.send 发送事件 unmaximize

mainWindow.webContents.send('unmaximize', '窗口从最大化状态退出')

渲染进程 vue 文件 —— ipcRenderer.on 响应事件 unmaximize

// 第一个参数 e 是事件对象，第二个参数 data 是传递过来的数据
window.electron.ipcRenderer.on('unmaximize', (e, data) => {
  console.log(data)
})

主进程控制台打印避免中文乱码

在项目启动脚本前加 chcp 65001 &&

package.json

"dev": "chcp 65001 && electron-vite dev",

开发环境自动打开调试窗口

src/main/index.ts

// 写在 createWindow 函数中 const mainWindow 的后面
  if (process.env.NODE_ENV === 'development') {
    mainWindow.webContents.openDevTools()
  }