本文我們講解下怎麼修改窗口樣式，系統默認的窗口非常普通，通常與設計不符，所以我們要自定義，接下來我們講解下怎麼去掉原有樣式，怎麼實現實現窗口的最小化，最大化和關閉按鈕。還有怎麼打開一個新頁面
我們基於上一篇文章的代碼（上一篇文章的git地址：https://gitee.com/hedavid/electron-vue-demos）接著寫。先看下上一篇文章實現的樣式：
接下來我們就要開始今天的講解了
1.去掉外邊框
我們修改background.js，修改createWindow方法，創建BrowserWindow時增加frame: false
<code>win = new BrowserWindow({
width: 400,
height: 550,
frame: false,
webPreferences: {
nodeIntegration: true
}
})
/<code>這樣窗口就會變成這樣：
但是現在又有一個新問題，應用沒有關閉按鈕，沒有最小化按鈕，也不能拖拽移動位置了，接下來我們為他創建一個工具條。
2.增加操作欄
（注意：在此處還涉及到其他頁面的樣式調整，在這裡就不列舉了，查看git上的代碼即可）我們修改Login.vue，增加以下代碼（只展示關鍵代碼，部分樣式和html請查看git上的代碼）：
<code>const { ipcRenderer } = require('electron')
// 點擊最小化按鈕調用的方法
minimize () {
ipcRenderer.send('minimize')
},
// 點擊關閉按鈕調用的方法
close () {
ipcRenderer.send('close')
},
/<code>窗口的拖動需要增加以下樣式：
<code>-webkit-app-region: drag; // 可拖動 -webkit-app-region: no-drag; // 不可拖動 /<code>
3.主線程中增加對應的最小化和關閉窗口的方法
<code>ipcMain.on('close', e =>
win.close()
)
ipcMain.on('minimize', e =>
win.minimize()
)
/<code>接下來我們改造一下主頁面，來實現打開新窗口的功能
4. 打開新窗口
4.1 新建Calendar.vue
<code>/<code>
4.2 修改router
<code>{
path: '/Calendar',
name: 'Calendar',
component: Calendar
},
/<code>4.3 修改background.js
<code>const winURL = process.env.NODE_ENV === 'development'
? 'http://localhost:8080'
: `file://${__dirname}/index.html`
/<code>上邊這段代碼主要是用來解決vue路由訪問頁面的問題，端口號是vue啟動的默認端口號，如果有需要可以自行修改
<code>win.loadURL(winURL) /<code>
上邊這段代碼主要是修改主窗口加載的url，修改我我們上邊聲明的那個
<code>// 定義calendar窗體
let calendarWin
// 創建calendar窗口方法
function openCalendarWindow () {
calendarWin = new BrowserWindow({
width: 400,
height: 550,
parent: win, // win是主窗口
webPreferences: {
nodeIntegration: true
}
})
calendarWin.loadURL(winURL + '#/Calendar')
calendarWin.on('closed', () => { calendarWin = null })
}
ipcMain.on('openCalendarWindow', e =>
openCalendarWindow()
)
/<code>上邊這段代碼是打開新窗口的代碼，calendarWin.loadURL(winURL + ‘#/Calendar’) 是指向我們上邊創建的頁面。
4.4 在Home.vue頁面中調用創建新窗口的方法
<code>openCalendarWindow () {
ipcRenderer.send('openCalendarWindow')
}
/<code>接下來我們看下效果
以上就是今天的全部內容，下一篇我們講一下怎麼發系統通知，最小化到托盤，剪貼板
分享到:
