从零开始学习electron+vue（三）自定义菜单以及登录功能

有没有觉得原生的菜单有点不太好看，那么要怎么处理呢？而且，我想实现项目启动先进入登陆界面，然后登陆成功后，跳转到其他页面，并且窗口改变大小！

隐藏原生菜单

//background.js
....
// 引入Menu模块
import { app, protocol, BrowserWindow, Menu} from 'electron'
// 取消菜单
Menu.setApplicationMenu(null)
....

取消原生登陆效果

接下来，让这个窗口边得好看一点吧
去掉原生的窗口样式，将窗口背景改成透明，不支持更改大小

// background.js
//找到cretaeWindow 函数
  const win = new BrowserWindow({
    width: 375,
    height: 667,
   frame: false,//去除原生窗口样式
    resizable: false,//窗口不支持自定义缩放
    transparent: true,//改为透明
    movable: true,//允许移动
    webPreferences: {
      // Use pluginOptions.nodeIntegration, leave this alone
      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
      // nodeIntegration: true,
      contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION,
      preload: path.join(__dirname, 'preload.js')
    }
  })

对页面的展示区域美化，给窗口加圆角添加背景投影

// app.vuue
...
<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background: #fff;
  border-radius: 5px;
  box-shadow: 1px 2px 5px 0px rgba(8, 42, 117, 0.1);
}
</style>
...

自定义后的窗口，可能不好看

新建login.vue，配置路由，设置重定向

// /router/index.js
...
const = routes=[
  ...
    {
    path: '/',
    redirect: '/login'
  },
  {
    path: '/login',
    component: () => import('../views/landing/login.vue')
  },
  ...
]
...

缩小和关闭按钮已经被隐藏了，我在登陆窗口时，想最小化和关闭又要怎么处理

// background.js
//引入ipcMain模块
import { app, protocol, BrowserWindow, Menu, ipcMain } from 'electron'
...
  // createWindow函数内
  // 进程自定义
  ipcMain.on('changWindowSize', e =>
    win.setSize(1050, 700)
  )
  ipcMain.on('min', () => win.minimize())
  ipcMain.on('max', () => win.maximize())
  ipcMain.on('close', () => {
    // win = null // 主窗口设置为null防止内存溢出
    app.exit() // 直接退出应用程序
  })
...

//login.vue
...
  //template
    <div class="login-nav" style="-webkit-app-region: drag">
      <i @click.stop="small">-</i>
      <i @click="close">x</i>
    </div>
...
...
  //methods
  small () {
      window.ipcRenderer.send('min')
    },
    close () {
     window. ipcRenderer.send('close')
    },
...

效果图

点击登陆后，跳转home，home发送changWindowSize命令

登陆功能初版