electron-vite【实战系列教程】

创建项目

https://blog.csdn.net/weixin_41192489/article/details/144442262

安装必要的插件

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图标

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

在这里插入图片描述

自定义标题

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

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

在这里插入图片描述

自定义标题栏

https://blog.csdn.net/weixin_41192489/article/details/144633554

创建托盘（含自定义托盘提示和快捷菜单）

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 的提示信息

在这里插入图片描述
右键快捷菜单为 contextMenu 中定义的数组，点击退出，会关闭项目。

在这里插入图片描述

渲染进程向主进程发消息

渲染进程 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()}

登录/注册页

https://blog.csdn.net/weixin_41192489/article/details/144616561