# 在 electron APP 中使用 vue
###### tags : `w3HexSchool` . `electron`
###### github : https://github.com/andrew781026/cypress-hahow/tree/master/vue-proj
上期 [利用 electron.js 建立桌面 APP ( Windows ) ](/YJIDUOGZQO-Uw9f5Dd9Frg)
我們製作桌面 APP 並借用 APP 中按鈕的開啟瀏覽器來顯示我們製作的 vue 頁面
但是 , 如果我們想要做一個完整的桌面 APP 時該如何實現呢 ?
這次我們來更加深入的整合與使用 vue & electron
## 建立 vue 專案
首先我們藉由 vue-cli 建立一個基礎 vue 模板
參照官方的 [vue-cli 安裝指南](https://cli.vuejs.org/zh/guide/installation.html)
Tree 整理出了建立步驟如下
- 安裝 vue-cli
- 利用 `vue create` 建立新專案
### 安裝 `vue-cli`
> 讓我們安裝 vue-cli 並且初步了解如何使用它
```bash=
# 全域安裝
npm install -g @vue/cli
# OR
yarn global add @vue/cli
```
> 使用 `vue -h` 查看一下 `vue-cli` 有哪些功能可以使用
> 發現有 `vue create <app-name>` 指令可以建立新的 vue 專案
```bash=
# 建立新的 vue 專案
vue create my-vue-proj
```
然後 , 我們就可以安裝今天的文章主角 `vue-cli-plugin-electron-builder`
讓我們偷看一下[插件官網教學](https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/#installation) , 了解如何安裝 `vue-cli-plugin-electron-builder`
原來安裝的方法很簡單 , 只要 `vue add electron-builder` :face_with_cowboy_hat:
讓我們施加魔幻大法吧 !
```bash=
vue add electron-builder
```
查看施法結果如何 ?
```bash=
npm run electron:serve
```
太棒了 ! 我們建立桌面一個 APP 了呢 !
## 使用 Node.js 相關的 API
需要轉換成桌面 APP 最關鍵的原因在於有些行為瀏覽器是不允許執行的
例 :
- 下載檔案並儲存到 APP 指定的位置 ( 在瀏覽器中 , 下載檔案後要儲存到哪裡 , 由瀏覽器控制 )
- 取得本機的 mac 位置 . IP . DNS 狀況
- 背景執行 ( 可縮小成圖示 , 但是還是執行動作 ) 與新增 windows / Linux / Mac 的通知訊息
不過 , 我們需要如何使用 Node API 呢 ?
- ipcMain . ipcRender
- preloader
### 方法一 : preloader.js
在 new BrowserWindow() 時 , 設定一個 JS 檔 , 讓其可以執行 Node API 也可以取得 html 中的 window 物件 , 並將函式註冊到 window 上以利 vue 開發時使用
> 首先 , 在 package.json 同層中新增檔案 vue.config.js
> 參考資料 : [設定 preload-files](https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/guide.html#preload-files)
```javascript=
// 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' }
}
}
};
```
> 第二步 , 在 `src/background.js` 中設定 preload
```javascript=
// 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')
}
});
```
> 第三步 , 新增 `src/preload.js` 並註冊函式到 window 物件上
```javascript=
// 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 中呼叫 `window.registerFuncs.appendText` 方法了 !
```javascript=
// App.vue
methods: {
save() {
// call the registered function
window.registerFuncs.appendText(this.text);
this.text = '';
},
},
```
如果想查看完整程式碼 , 可以查看[我的 Github](https://github.com/andrew781026/cypress-hahow/tree/master/vue-proj)
### 方法二 : ipcMain . ipcRender
在 html 中使用 ipcRender
在 background.js 中使用 ipcMain
並且 ipcRender 與 ipcMain 利用 .send / .on 方法在同名的頻道中進行溝通
```javascript=
// index.html
ipcRender.send('save-file',file);
// 註冊事件
ipcRender.on('save-file-reply',()=>console.log('你成功儲存檔案'));
```
```javascript=
// background.js
// 註冊事件
ipcMain.on('save-file',(file)=>{
saveFile(file);
// 呼叫 ipcRender 註冊的 save-file-reply
ipcMain.send('save-file');
});
```
## 參考資料
- [手把手教你使用Electron5+vue-cli3开发跨平台桌面应用](https://juejin.im/post/5d1abff7f265da1bb80c47e3)
- [vue-cli-plugin-electron-builder 官方教程](https://github.com/nklayman/vue-cli-plugin-electron-builder)
Sign in with Wallet
Connect another wallet