electron-vue跨平台桌面应用开发实战教程（三）——动态修改窗口大小

.mainmargin-left30pxmargin-right30px.avatarmargin-top40pxmargin-bottom40pxbuttonwidth100%.itemmargin-top20px前两文简单介绍如何搭建electron-vue项目，主进程的基本配置，以及两者之间的关系主进程和渲染进程通信。在本文中，我们主要讲解如何动态修改窗口大小。通常，很多桌面应用程序在第一次打开时需要登录。登录窗口相对较小。登录成功后，会弹出一个较大的窗口，显示登录后的信息。比如QQ、钉钉、有道云笔记等应用。那么这篇文章会演示如果实现了这个功能，我们会先做一些准备工作，我们会开发一个简单的小应用来给大家展示这个功能。我们这里选择的技术是：UI框架：element-uijson数据库：lowdb我们在第一篇代码的基础上安装这两个依赖安装element-uinpmielement-ui-S安装lowdbnpminstalllowdbconfigureelement-ui修改main.jsimportVuefrom'vue';importElementUIfrom'element-ui';import'element-ui/lib/theme-chalk/index.css';importAppfrom'./App.vue';Vue.使用（ElementUI）；newVue（{el:'#app',render:h=>h(App)}）;准备工作已经完成，接下来开始正式开发1.修改窗口大小，通常登录窗口比较小，我们设置登录窗口大小为width:400,height:550background.jswin=newBrowserWindow({width:400,height:550,webPreferences:{nodeIntegration:true}})2.画一个登录界面我们在src/views文件夹下新建一个Login.vue文件，给登录??按钮添加点击事件，并让他跳转到首页。（添加了登录成功和失败的小逻辑）.mainmargin-left30pxmargin-right30px.avatarmargin-top40pxmargin-bottom40pxbuttonwidth100%.itemmargin-top20px3.修改路径由src/router/index.jsimportVuefrom'vue'importVueRouterfrom'vue-router'importHomefrom'../views/Home.vue'importLoginfrom'../views/Login.vue'Vue.use(VueRouter)constroutes=[{path:'/Home',name:'Home',component:Home},{path:'/',name:'Login',component:Login},{path:'/about',name:'About',component:()=>import('../views/About.vue')}]constrouter=newVueRouter({routes})exportdefaultrouter4.修改App.vue#appfont-familyAvenir、Helvetica、Arial、sans-serif-webkit-font-smoothingantialiased-moz-osx-font-smoothinggrayscaletext-aligncentercolor#2c3e50margin-top60px5.修改Home.vue进入首页后，我们需要调整窗口大小为正常窗口大小。我们设置宽度：1050，高度：700；通过第二篇我们知道改变窗口大小需要在主进程中操作。我们的首页是渲染进程，所以这个时候就需要使用进程间通信。主进程（background.js）添加如下代码import{app,protocol,BrowserWindow,ipcMain}from'electron'ipcMain.on('changWindowSize',e=>win.setSize(1050,700))Home.vue这是结束动态修改窗口，代码稍后上传到gitee。在下一篇文章中，我们将讲解如何去除窗口自带的外边框，如何自行最小化、最大化、关闭、打开新窗口。更多内容请关注公众号