[Electron] Vue 기반 보일러 플레이트로 일렉트론 앱 빌드하기(Electron-Vue)

안녕하세요😊

지난 포스팅에서 VCP Electron Builder 보일러 플레이트를 이용하여 Vue Cli 기반의 Electron 앱을 구성하고 빌드하는 과정을 소개했었습니다. 

 

프로젝트를 시작하기에 앞서 다른 보일러 플레이트도 비교를 해봐야 할 것 같아, 그전부터 봐왔던 Electron-Vue 보일러 플레이트를 이용하여 프로젝트를 구축해보았습니다.

 

Electron-Vue도 아주 간단하게 프로젝트를 스케폴딩할 수 있었는데, 그 과정을 소개해보겠습니다.

 

 

Vue Cli 설치

아래 명령어로 vue-cli를 전역에 설치해줍니다.

npm install -g vue-cli

그리고 vue init 명령어를 이용하기 위해서는 아래 명령어로 추가 모듈을 설치해줍니다.

npm i -g @vue/cli-init

 

 

electron-vue 프로젝트 생성하기

아래 명령어를 이용하여 electron-vue 보일러 플레이트를 이용하여 프로젝트를 생성해줍니다.

electron-vue-app이라고 되어있는 부분은 원하는 프로젝트 명으로 변경하여 사용하시면 됩니다.

vue init simulatedgreg/electron-vue electron-vue-app

 

프로젝트를 생성하는 과정에서 여러 옵션을 선택할 수 있습니다.

저는 아래와 같이 옵션을 선택하였습니다.

 

electron-vue 프로젝트  실행하기

프로젝트 생성이 완료되고나면 프로젝트 안으로 이동하여 yarn을 이용하여 서버를 구동해줍니다.

cd electron-vue-app
yarn (or `npm install`)
yarn run dev (or `npm run dev`)

 

그럼 아래처럼 vue 기반의 electron 앱이 실행됩니다.

 

 

Electron-Vue vs VCP Electron Builder

지난번에 사용해보았던 VCP Electron Builder도 구축이 엄청 간단해서 놀랐었는데, electron-vue 프로젝트도 간편하게 프로젝트를 스케폴딩 할 수 있었습니다.

 

그런데 단점은 electron이 2 버전 대이고 노드도 8 버전 대를 사용하고 있었습니다😭

VCP Electron Builder는 electron 버전이 13이었는데 electron-vue에 비하면 훨씬 최신 버전이었네요..ㅎㅎ ㅎ

 

electron-vue 깃헙에 들어가 보니 16년도 이후에 별도의 릴리즈가 없었던 것 같습니다.

VCP Electron Builder는 그래도 21년 5월에 마지막 릴리즈가 있었네요.

 

저는 아무래도 VCP Electron Builder를 이용하여 본격적인 프로젝트를 실행하게 될 것 같습니다.

 

 

 

Reference

• https://simulatedgreg.gitbooks.io/electron-vue/content/ko/
• https://github.com/SimulatedGREG/electron-vue