vue3+electron开发桌面软件入门与实战（3）—— electron模块化改造+窗口位置工具+合并命令行工具

系列文章目录

1. vue3+electron开发桌面软件入门与实战（0）——创建electron应用
2. vue3+electron开发桌面软件入门与实战（1）——创建electron+vue3主体项目
3. vue3+electron开发桌面软件入门与实战（2）——创建electron+vue3项目级集成
4. 后续文章请关注专栏

---

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

最基础的项目架构已搭建完毕，如果有同学看到了这里，说明同学已经摆脱了拿个demo就志得意满的低级趣味，本篇文章可能不会对你桌面端应用有什么显示上的提升，但是绝对会让你的应用更趋近于企业级应用。

如果没有一定基础，请不要参考本系列中间文章开始构建项目，因为可能有些资源在前面已经确定好路径，后面的方法或者静态资源都有可能出问题，我已经整理好包含vue全生态工具+electron的源码，如有需要请私信我获取

---

electron代码模块化改造

在开始讲解本章前，先把我们的electron代码进行改造。
目前我们electron的main.js中主要是创建窗口的方法，代码为：

const { app, BrowserWindow } = require('electron')
const createWindow = () => {
    const win = new BrowserWindow({
        width: 800,
        height: 600
    })
    let contents = win.webContents

    contents.openDevTools()

    // win.loadURL('http://127.0.0.1:5173/')
    win.loadFile('../../dist/index.html')

}
app.whenReady().then(() => {
    createWindow()
    

    app.on('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
})
app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') app.quit()
})

createWindow()方法可以通过外部js文件引入的方式，以后关于窗口的所有方法都放在同一个文件中。
改造后windows.js文件代码如下：

const { BrowserWindow} = require('electron')

/**
 * 创建窗口对象*/
class Window {
    win = null

    createWindow () {
        this.win = new BrowserWindow({
            width: 800,
            height: 600
        })
        let contents = this.win.webContents

        contents.openDevTools()

        this.win.loadURL('http://127.0.0.1:5173/')
        // this.win.loadFile('../../dist/index.html')

        return this.win
    }

}

module.exports = Window

main.js代码如下：

const { app, BrowserWindow } = require('electron')
const getWindow = require('./Window')

app.whenReady().then(() => {
    let win=null
    win = new getWindow().createWindow() //创建窗口

    app.on('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0) win.createWindow()
    })
})
app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') app.quit()
})

electron窗口状态记录工具

很多时候，我们希望打开桌面应用窗口时，是上一次关闭时的位置和大小，借助工具electron-window-state可以很便捷地实现。
下载

npm i electron-window-state

按照electron-window-state的介绍，修改windows.js代码，增加方法：

const windowStateKeeper = require('electron-window-state');
省略代码……

 getWindowState() {
        //    配置electron-window-state插件,获取窗口option
        let win
        const mainWindowState = windowStateKeeper({
            defaultWidth: 1000,
            defaultHeight: 800
        });
        const options = {
            ...mainWindowState,
            devTools: true,
            show: false,
            icon: path.resolve(__dirname, '../log.ico'),
            webPreferences: {
                // nodeIntegration:true,  //集成node api
                // contextIsolation:false  //关闭上下文隔离，配合nodeIntegration，可以赋予在render进程中写node代码的能力
                preload: path.resolve(__dirname, '../preload/preload.js')  //预加载的js文件
            }
        }


        win = new BrowserWindow(options)
        mainWindowState.manage(win);
        return win
    }

原createWindow方法中的

this.win = new BrowserWindow({
            width: 800,
            height: 600
        })

改为:

        this.win = this.getWindowState()

        //等待dom渲染后打开窗口
        this.win.on('ready-to-show', () => {
            this.win.show()
        })
        this.win.on('closed', () => {
            this.win = null;
        })

开发模式下不方便看此工具是否生效，请打包后，通过exe打开应用，不论拖动还是改变桌面大小，应该都是生效的。

命令行合并工具

现在我们在开发环境，每次都需要执行“yarn dev”和“yarn start”两个命令，时间久了也挺麻烦的。所以我们希望能够有一个命令deva，可以同时执行vue和electron。

理论上powershell应该是不支持“&&”符号的，不知道为什么，打包的命令可以用“&&”，不过开发环境还是不生效，我们需要借助工具npm-run-all。
下载：

npm i npm-run-all

这个工具很简单，只需要在package.json中scripts标签增加命令：

"deva": "npm-run-all --parallel dev start",

以后我们再启动项目的时候，就可以用命令“yarn deva”启动了