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 mainWindow
const 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好像要掀起一陣旋風了喔

發佈留言