electron + vite + vue3
参考网址： https://evite.netlify.app/
安装步骤
npx degit alex8088/electron-vite-boilerplate electron-app
cd electron-app
npm install
npm run dev
electron-app项目，目录结构说明
build ==》打包操作，例如：打包后的应用图标，.env环境变量的配置等等
resources ==〉资料目录，例如：放入图片，有点类似于vue-cli中的publick目录
src
|main ==>操作主进程内容，例如：创建窗口等
|preload ==>预加载，本身渲染进程是不可以使用electron等api的，通过preload预加载就可以使用了。
|renderer ==>操作渲染进程，就是应用中的内容。
electron.vite.config.ts ==》这个和vue中的vite.config.js ｜｜ vue.config.js类似
安装路由
安装路由：npm install vue-router -S
新建：router/index.js
router/index.js写入内容
import { createRouter, createWebHashHistory } from "vue-router";
export default createRouter({
history: createWebHashHistory(),//hash模式
routes:[{ path: "/", component: Login }]//路由配置规则数组
})
main.ts中use一下router
use(router)
下载pinia
官网：https://pinia.web3doc.top/
下载：npm install pinia -S
main.ts引入
import { createPinia } from 'pinia'
app.use(createPinia())
新建目录：store/index.js
import { defineStore } from 'pinia'
export const useStore = defineStore('storeId', {
state: () => {
return {
counter: 0,
}
},
getters:{},
actions:{}
})
electron.vite.config.ts配置
export default defineConfig({
main: {
...
},
preload: {
...
},
renderer: {
resolve: {
alias: {
...
}
},
server:{
"proxy":{
"/api":{
target:'http://uat.crm.xuexiluxian.cn',
changeOrigin:true,
rewrite: path => path.replace(/^\/api/,'')
}
}
},
plugins: [
...
]
}
})
打开调适
窗口.webContents.openDevTools();
渲染进程 向 主进程通信
渲染进程：
electron.ipcRenderer.invoke('名称',{ 传值 } )
主进程：
import { app, shell, BrowserWindow , ipcMain } from 'electron'
ipcMain.handle('名称',(event,渲染进程向主进程传递的参数)=>{
})
窗口大小位置设置
1、大小
new BrowserWindow({
width: 500,
height: 500,
minHeight:500,
minWidth:500,
maxHeight:500,
maxWidth:500,
show: false,
resizable:false, ==> 窗口大小是否可调整。 默认值为 true。
})
2、位置
//初始化设置
new BrowserWindow({
x:10,
y:10
})
//有计算的设置
mainWindow.setBounds({
y:winHeight-250
})
3、screen
检索有关屏幕大小、显示器、光标位置等的信息。
获取屏幕宽度高度等： screen.getPrimaryDisplay()
4、窗口置顶
alwaysOnTop:true,//置顶窗口
5、透明窗口
transparent:true,//窗口透明
6、锁定、解锁窗口
参考链接：https://www.xuexiluxian.cn/blog/detail/207128a5387c43a198f69669728ac71e
7、解决阴影问题
hasShadow:false,//去除阴影
问题：
1、原生状态：有标题和关闭、缩小、放大
2、无标题，有：关闭、缩小、放大
2.1 隐藏标题
titleBarStyle:'hidden'
3、无标题，无关闭、缩小、放大
3.1 无边框窗口
frame:false
3.2 无关闭、缩小、放大 需要 ==> 自定义
4、解决窗口无法移动
4.1 渲染进程添加样式来解决
1. 在渲染进程的dom中，添加样式：-webkit-app-region: drag;
2. 给不需要拖拽的元素，取消-webkit-app-region: no-drag;事件才可以生效
4.2 渲染进程向主进程通信==》主进程设置窗口的位置
1. 渲染进程添加事件mousedown，使用拖拽的方式来记录值
2. 渲染进程把值，传递给主进程
3. 主进程设置窗口的位置: mainWindow.setPosition(res.appX,res.appY);