# Vue.js - electron

[建置vue搭配electron參考網址在這](https://ithelp.ithome.com.tw/articles/10234952)

注意

- vue ui 指令有error的話，用管理員模式開powershell看看。
- electron插件直接到ui裝比較快。
- 檔案突破1G，且專案建置完要動位置很麻煩，所以慎選位置。

### build

打包指令

npm run electron:build

若不行，是因為node.js版本太高，Openssl有更高限制。
所以需要修改設定。
:::info
注意：以下方法是改用舊版Openssl，有安全隱憂。
另解在[stackoverflow](https://stackoverflow.com/questions/69692842/error-message-error0308010cdigital-envelope-routinesunsupported)的第二個解答(但是我失敗了)
:::

需要在package.json中把

"electron:build": "vue-cli-service electron:build"

改成

"electron:build": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service electron:build"

### portable
生成免安裝版需要在vue.config.js把

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true
})

改成

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,

  pluginOptions: {
    electronBuilder: {
      builderOptions: {
        win: {
          target: [{
            target: 'portable',
            arch: ['ia32', 'x64']
          }]
        }
      }
    }
  }
});

安裝檔、免安裝檔都在dist_electron資料夾

# 哈士奇手把手建置Eletron+Vue(Vite)
## 首先裝[electron-vite](https://cn.electron-vite.org/guide/)

npm i electron-vite -D

## 創建Electron + Vue

# npm 6.x
npm create @quick-start/electron my-app --template vue

# npm 7+, extra double-dash is needed:
npm create @quick-start/electron my-app -- --template vue

# yarn
yarn create @quick-start/electron my-app --template vue

# pnpm
pnpm create @quick-start/electron my-app --template vue

## 測試執行
到`my-app`資料夾中執行

npm install
npm run dev

## 安裝dev-tools
請參考:https://blog.csdn.net/lijianfei1989/article/details/127393474
使用方法二，將引用程式碼加在這裡，如下第6行

app.whenReady().then(() => {
  // Set app user model id for windows
  electronApp.setAppUserModelId('com.electron')

  // Load DevTools extension
  session.defaultSession.loadExtension(join(__dirname, '../../../devtools/6.6.1_0'))
  
  // Default open or close DevTools by F12 in development
  // and ignore CommandOrControl + R in production.
  // see https://github.com/alex8088/electron-toolkit/tree/master/packages/utils
  app.on('browser-window-created', (_, window) => {
    optimizer.watchWindowShortcuts(window)
  })

  // IPC test
  ipcMain.on('ping', () => console.log('pong'))

  createWindow()

  app.on('activate', function () {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

## 打包exe
在package.json的"scripts"中加入一行

"exe-build": "electron-builder"

並在

exe檔案會生成在 dist/win-unpacked/

## element plus 安裝
`npm install element-plus --save`
https://blog.csdn.net/Mr_28/article/details/129684862

## element plus 工具們
https://element-plus.org/en-US/component/overview.html

# IPC 使用EX (雙向)

// App.vue

<script setup lang="ts">
const ipcHandle = () => {
  window.electron.ipcRenderer.send('get-time');
  window.electron.ipcRenderer.once('get-time-reply', (event, arg) => {
    replyMessage.value = arg;
  });
};
</script>

<template>
    <label> {{ replyMessage }} </label>
</template>

// ./main/index.js

ipcMain.on('get-time', (event) => {
    const now = new Date();
    event.reply('get-time-reply', now.toString());
});