Electron + Vue 시작하기

Electron?

Electron이란 웹 기술 스택(HTML, CSS, Javascript)을 사용해 데스크톱 어플리케이션 구축을 가능하게 해주는 도구라고 생각하면 된다. 오픈소스 프로젝트이며 맥, 윈도우, 리눅 세 개의 플랫폼에서 빌드되고 동작이 가능하다.

 

요즘 웹 개발자들이 사용하는 React, Vue 등을 Electron과 같이 사용해 데스크톱앱을 만들 수 있어서 러닝 커브도 낮은 편이다.

 

 

Electron + Vue 시작

일단 Vue project 위에 Electron을 얹어서 사용할 것이기 때문에 Vue project를 먼저 생성할 것이다. Vue project 시작 법은

https://groot-dev.tistory.com/4 여기에 정리되어 있다.

 

vue 프로젝트 생성

"vue create 프로젝트 이름" 명령어로 프로젝트를 생성했다면 프로젝트 내부로 이동해 electron-builder를 설치해준다.

electron-builder 추가

electron-builder 추가가 완료 되었다면, package.json에 아래 그림과 같이 Scripts 부분에 명령어가 추가 되었을 것이다.

package.json

electron:serve를 하면 vue 프로젝트를 electron 위에서 돌려주겠다는 말이다. 해보자.

electron+vue 실행

실행 결과

실행이 완료 되면 위 그림과 같이 프로그램이 하나 뜨고 그 위에 vue boilerplate가 올라가 있는 것을 확인 가능하다. 이 프로그램을 빌드해서 확인해보고 싶다면

npm run electron:build

또는

yarn electron:serve

위 명령어를 통해 빌드가 가능하다. 빌드가 끝나면 프로젝트 폴더 내부의에 dist_electron 폴더가 생성이 되고 그 안에 빌드된 결과물이 exe 파일 형태로 나온다. (mac 이면 dmg 파일)