electron+vue簡單範例

桌面應用的框架很多
像是C++的Qt等等
有一個只要會前端就會寫的桌面應用框架
且也是跨平台的（這個很重要，讓你在開發程式的時候不用開發2次）

electron是使用Node.js和Chromium來完成桌面GUI應用程式的開發
只要懂javascript，就可以寫桌面的應用程式
現在有名的IDE VSCode 就是用electron構建的

本篇將會使用目前有名的前端框架搭配electron來做一個簡單示範
透過vue/cli構建整個專案

首先下載最新的vue cli 工具

# vue-cli 已經是舊版的了＄npm install -g @vue/cli

創建專案環境

# simulatedgreg/electron-vue是一個vue的template＄vue init simulatedgreg/electron-vue easyeditor

之中有一些設定就不多說了
build的tool我選擇是packager
electron packager：只做打包的動作，打包出exe執行檔
electron builder：可以做出不暴露源始碼的安裝檔

之後進入專案資料夾

＄cd easyeditor＄npm install＄npm run dev

可以看到以下畫面就是成功啦

如果在npm install 中遇到如下問題

# 可以這樣解決＄npm install --unsafe-perm=true

專案資料夾的結構如下：

為什麼要看資料夾結構呢？
因為要講一下electron是如何做到桌面應用的～
src資料夾中，分為main與renderer
也分別對應著electron中main與render的process
main指的是主進程，可以在這裡使用nodejs與os交互
render是渲染進程，負責目前頁面的渲染
而main與render之間的溝通用的是electron ipcRenderer與ipcMain
在後面的範例中會稍做解釋

這個樣版，將render的部分交給了vue
接下來讓我們來用vue做個簡單的編輯器
再交給electron做存檔

將用到vue2-editor這個套件

＄npm install vue2-editor

在components資料夾下新增一個EditorPage.vue
內容為

接著設定路由（編輯router/index.js）

import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)export default new Router({  routes: [    {      path: '/',      name: 'Editor-page',      component: require('@/components/EditorPage').default    },    {      path: '*',      redirect: '/'    }  ]})

執行npm run dev出現以下畫面就成功一半啦

接下來要搞定save的問題
會先在render process 發一條訊號給main process
main process提供一個選擇儲存路徑的視窗並完成儲存的動作

在render這裡（EditorPage.vue）加上button的事件
並傳送render的事件
從electron裡import ipcRenderer

在main process（main資料夾下的index.js）
這裡新增ipcMain接收render的訊息
ipcMain用於偵聽事件
dialog用於顯示儲存視窗
fs用於存檔

import { app, BrowserWindow,  ipcMain, dialog} from 'electron'import fs from 'fs'/** * Set `__static` path to static files in production * https://simulatedgreg.gitbooks.io/electron-vue/content/en/using-static-assets.html */if (process.env.NODE_ENV !== 'development') {  global.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')}let mainWindowconst winURL = process.env.NODE_ENV === 'development'  ? `http://localhost:9080`  : `file://${__dirname}/index.html`function createWindow () {  /**   * Initial window options   */  mainWindow = new BrowserWindow({    height: 563,    useContentSize: true,    width: 1000  })  mainWindow.loadURL(winURL)  mainWindow.on('closed', () => {    mainWindow = null  })}app.on('ready', createWindow)app.on('window-all-closed', () => {  if (process.platform !== 'darwin') {    app.quit()  }})app.on('activate', () => {  if (mainWindow === null) {    createWindow()  }})// 在這裡偵聽由render發出的事件ipcMain.on('sava-data', (event, data) => {  dialog.showSaveDialog(null, { }, function(files){    if (files) {      fs.writeFile(files, data, function(error) {        if (error) {          console.log(error)        }      })    }  })})

按下save會出現以下畫面就成功啦

只是一個簡單的文本編輯器
vue很好上手，加上electron
很快就能打造自己的桌面應用囉

如果對javascript有興趣
也可以看看 這裡

佶曰：flutter好像要掀起一陣旋風了喔