Electron-vue 관련 링크 모음

 

Electron 설치 순서	https://jiwondh.github.io/2017/06/22/Electron1/
electron-vue	https://github.com/SimulatedGREG/electron-vue/tree/master/docs/ko
Node.js와 Vue.js 간 통신하는 방법	https://itinerant.tistory.com/52
Node.js와 Vue.js 간 통신하는 방법2	https://electronjs.org/docs/api/ipc-main

 

기타

• electron-vue를 설치하기 위해서는 vue-cli 2버전을 사용해야 한다.
• npm install -g @vue/cli로 vue 3버전 이상을 설치해야 vue add vuetify를 사용할 수 있다. 이를 위해, electron-vue를 설치한 후에 다시 vue-cli를 3버전으로 업그레이드 해야 한다.
• electron-vue에서 vuetify를 설치할 때 npm 대신 "yarn add vuetify"를 사용해야 한다. "npm install vuetify"를 사용할 경우 "npm ERR! code EINVAL" 오류를 표출하면서 설치가 중단된다.
• 콘솔 화면에서 "[Vuetify] Multiple instances of Vue detected" 오류 메시지가 출력되는데 검색해보니 vuetify의 버그로 무시해도 된다고 한다.

 

electron-vue 설치 후 vuetify 설치하는 방법

1. 터미널에 "yarn add vuetify"를 입력한다.
2. /src/renderer/main.js에 다음을 추가한다.

import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuetify)

이제 vuetify를 사용할 수 있다.

 

Node.js와 Vue.js간 통신하는 방법

Node.js 측 코드

let ipcMain = require('electron').ipcMain;

ipcMain.on('test', function(event, arg){
  console.dir(arg)
});

Vue.js 측 코드

<script>
let ipc = require('electron').ipcRenderer

export default {
  methods:{
    click_hello(){
      let msg = 'Hello world'
      ipc.send('test', msg)
    }
  }
}
</script>