前邊兩篇文字簡單介紹了一下怎么搭建electron-vue項目，主進程的基本配置，主進程和渲染進程之間的通訊。本文我們主要來講解下如何動態(tài)的修改窗口大小。

通常很多桌面應(yīng)用，初次打開都需要登錄，登錄窗口比較小，登錄成功之后展示一個更大的窗口，展示登錄后的信息。例如QQ，釘釘，有道云筆記這些應(yīng)用。

那么本文就來演示下如果做到這個功能，我們先做一下準(zhǔn)備工作，我們會開發(fā)一個簡單的小應(yīng)用來給大家展示這個功能。

這里我們選用的技術(shù)為：

1. UI框架：element-ui
2. json數(shù)據(jù)庫：lowdb

我們在第一篇文章的代碼基礎(chǔ)上，再安裝這兩個依賴

安裝element-ui

npm i element-ui -S

安裝lowdb

npm install lowdb

配置element-ui

修改main.js

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

準(zhǔn)備工作已經(jīng)完成了，接下來就進入正式的開發(fā)了

1.修改窗口大小

通常登錄窗口比較小，這個我們將登錄窗口大小設(shè)置為寬：400，高：550
background.js

 win = new BrowserWindow({
    width: 400,
    height: 550,
    webPreferences: {
      nodeIntegration: true
    }
  })

2.繪制一個登錄界面

我們再src/views 文件夾下新建Login.vue文件，給登錄按鈕加上點擊事件，讓他跳轉(zhuǎn)到Home頁。(增加了登錄成功失敗的小邏輯)

<template>
  <div class="main">
    <div class="avatar">
      <el-avatar :size="60" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
    </div>
    <div class="item">
      <el-input placeholder="請輸入賬號" v-model="account" clearable prefix-icon="el-icon-user"></el-input>
    </div>
    <div class="item">
      <el-input placeholder="請輸入密碼" v-model="password" show-password prefix-icon="el-icon-lock"></el-input>
    </div>
    <div class="item">
      <el-button type="primary" round @click="login">登錄</el-button>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Login',
  data () {
    return {
      account: '',
      password: ''
    }
  },
  methods: {
    login () {
      if (this.account === 'admin' && this.password === '123456') {
        this.$router.push('Home')
      } else {
        this.$message.error('用戶名或密碼錯誤')
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
.main
  margin-left 30px
  margin-right 30px
.avatar
  margin-top 40px
  margin-bottom 40px
button
  width 100%
.item
  margin-top 20px
</style>

3.修改路由

src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Login from '../views/Login.vue'
Vue.use(VueRouter)
const routes = [
  {
    path: '/Home',
    name: 'Home',
    component: Home
  },
  {
    path: '/',
    name: 'Login',
    component: Login
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
  }
]
const router = new VueRouter({
  routes
})
export default router

4.修改App.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>
<style lang="stylus">
#app
  font-family Avenir, Helvetica, Arial, sans-serif
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale
  text-align center
  color #2c3e50
  margin-top 60px
</style>

5.修改Home.vue

進入Home頁面后，我們要將窗口的大小，調(diào)整為正常窗口大小，我們設(shè)置寬：1050，高：700；通過第二篇文章，我們知道改變窗口大小是需要再主進程中才能操作，我們Home頁面是渲染進程，所以我們這時候要用到進程間通訊。

主進程（background.js）增加以下代碼

import { app, protocol, BrowserWindow, ipcMain } from 'electron'
ipcMain.on('changWindowSize', e =>
  win.setSize(1050, 700)
)

Home.vue

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
  </div>
</template>
<script>
const { ipcRenderer } = require('electron')
export default {
  name: 'Home',
  mounted () {
    this.changeWindowSize()
  },
  methods: {
    changeWindowSize () {
      ipcRenderer.send('changWindowSize')
    }
  }
}
</script>

動態(tài)修改窗口到這兒就講完了，代碼稍后會上傳到gitee。下一篇我們講解以下怎么去掉窗口自帶的外邊框，怎么自己實現(xiàn)最小化，最大化，關(guān)閉，還有新開一個窗口。