在 electron APP 中使用 vue

# 全域安裝
npm install -g @vue/cli
# OR
yarn global add @vue/cli

# 建立新的 vue 專案 
vue create my-vue-proj

vue add electron-builder

npm run electron:serve

// vue.config.js , 

module.exports = {
    pluginOptions: {
        electronBuilder: {
            preload: 'src/preload.js',
            // Or, for multiple preload files:
            // preload: { preload: 'src/preload.js', otherPreload: 'src/preload2.js' }
        }
    }
};

// background.js , 

+ const path = require('path');
    
  // Create the browser window.
  win = new BrowserWindow({
        width: 800,
        height: 600,
        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,
+           preload: path.join(__dirname, 'preload.js')
        }
    });

// preload.js , 

const fs = require('fs');
const path = require('path');

// All of the Node.js APIs are available in the preload process.
// It has the same sandbox as a Chrome extension.
window.addEventListener('DOMContentLoaded', () => {

    // setting many function on windows

    const registerFuncs = {};

    registerFuncs.appendText = (text) => {

        const newPath = path.resolve(__dirname, 'the-text.txt');

        console.log('saving start at path=', newPath, ';text=', text);

        fs.writeFileSync(newPath, text + '\n', {
            encoding: 'utf8',
            flag: 'a' // append text to the end of text file
        });
    };

    // 將設定的 function 掛載到 window 上
    window.registerFuncs = registerFuncs;
});

// App.vue
methods: {
   save() {
        // call the registered function
        window.registerFuncs.appendText(this.text);
        this.text = '';
   },
},

// index.html
ipcRender.send('save-file',file);

// 註冊事件
ipcRender.on('save-file-reply',()=>console.log('你成功儲存檔案'));

// background.js

// 註冊事件
ipcMain.on('save-file',(file)=>{
    saveFile(file);
    
    // 呼叫 ipcRender 註冊的 save-file-reply
    ipcMain.send('save-file'); 
});