超详细！！！electron-vite-vue开发桌面应用之Electron自定义头部菜单栏（六）

上篇配置完路由基本可以进行业务逻辑界面开发了，但是对于头部存在的菜单栏明显是不符合需求的，这里可以配置隐藏

一、配置应用名称以及图标

/index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>云风笔记</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

electron/main.ts

export const VITE_DEV_SERVER_URL = process.env['VITE_DEV_SERVER_URL']
export const MAIN_DIST = path.join(process.env.APP_ROOT, 'dist-electron')
export const RENDERER_DIST = path.join(process.env.APP_ROOT, 'dist')

process.env.VITE_PUBLIC = VITE_DEV_SERVER_URL ? path.join(process.env.APP_ROOT, 'public') : RENDERER_DIST

let win: BrowserWindow | null

function createWindow() {
  win = new BrowserWindow({
    icon: path.join(process.env.VITE_PUBLIC, 'logo.png'),
  })
}

在这里插入图片描述

二、隐藏头部菜单栏

import { app,Menu, BrowserWindow } from 'electron'
// 隐藏应用菜单
Menu.setApplicationMenu(null);

在这里插入图片描述

也可以通过配置参数frame:false实现整体隐藏

function createWindow() {
  win = new BrowserWindow({
    icon: path.join(process.env.VITE_PUBLIC, 'electron-vite.svg'),
    frame: false, // 去掉导航最大化最小化以及关闭按钮
    width: 800,
    height: 600,
    minWidth: 800,
    minHeight: 600,
    center: true,
    webPreferences: {
      preload: path.join(__dirname, 'preload.mjs')
    },
  })
}

在这里插入图片描述

超详细！！！electron-vite-vue开发桌面应用之Electron自定义头部菜单栏（六）

一、配置应用名称以及图标

二、隐藏头部菜单栏

云风

引用和评论

超详细！！！electron-vite-vue开发桌面应用之axios接口请求封装（十）

CSS团队协作规范

100个React最佳实践小技巧

不使用 JS 纯 CSS 获取屏幕宽高

前端开发工具

开发插件集合

CSS 现在终于支持高度 auto 过渡动画了