electron+vue 设置默认打开就是全屏，获取屏幕的宽高自动全屏

在main.js中，或者有的项目是background.js中，添加如下代码：

const { app, BrowserWindow, ipcMain, screen } = require('electron');  
const path = require('path');  
  
let win;  
  
function createWindow() {  
  const { width, height } = screen.getPrimaryDisplay().bounds;  
  
  win = new BrowserWindow({  
    width: width,  
    height: height,  
    frame: false, // 隐藏窗口边框和标题栏  
    webPreferences: {  
      nodeIntegration: true,  
      contextIsolation: false,  
    },  
  });  
  
  win.loadFile(path.join(__dirname, 'index.html')); // 加载您的 Vue 应用程序  
}  
  
app.whenReady().then(() => {  
  createWindow();  
});  
  
app.on('activate', () => {  
  if (BrowserWindow.getAllWindows().length === 0) {  
    createWindow();  
  }  
});  
  
ipcMain.handle('enter-full-screen', () => {  
  win.setFullScreen(true); // 进入全屏模式  
});

index.vue文件中：

<template>  
  <div id="app">  
    <!-- 您的 Vue 应用程序代码 -->  
  </div>  
</template>  
  
<script>  
export default {  
  mounted() {  
    this.$refs.app.addEventListener('click', () => {  
      this.$emit('request-enter-full-screen'); // 当用户点击时触发 'request-enter-full-screen' 事件  
    });  
  },  
};  
</script>

 

如需关闭全屏的代码（依旧在main.js或者，background.js中写入）

ipcMain.handle('exit-full-screen', () => {  
  win.setFullScreen(false); // 退出全屏模式  
});