创建项目
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()
})
创建托盘（含自定义托盘提示和快捷菜单）
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
