electron + vite + vue3问题

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);