지금까지 Vue.js + Electron의 조합으로 프로젝트를 만들려면 electron-vue가 스테디셀러였습니다.
그러나 Vue CLI가 버전 3이되어 Webpack 주위의 설정을 의식하지 않고 TypeScript 등을 간편하게 도입 할 수 있다는 것에 익숙해지면 Vue CLI 2 기반의 electron-vue로 신규 프로젝트를 만드는 것은 약간 번거롭습니다. 생각해 버립니다.
검색해 보면 Vue CLI 3 플러그인인 vue-cli-plugin-electron-builder 라는 것을 발견하고 매우 편리했기 때문에 소개하겠습니다.


공식 사이트 h tps : / / n k ぁ y 만. 기주 b. 이오 / ㄔ ぃ - ぅ ぅ 긴 - ぇct

도입 방법

Vue CLI 3이 설치되어 있고 이미 프로젝트를 만든 상태에서,

vue add electron-builder

를 입력하면 Electron 및 종속 패키지가 설치되고 다양한 설정과 파일이 추가됩니다.

※ vue ui 의 플러그인 화면에서도 추가할 수 있습니다

추가되는 것

.gitignore

응용 프로그램 빌드 대상 디렉토리 /dist_electron가 .gitignore에 추가됩니다.

package.json

프로젝트 루트의 package.json에 몇 가지 npm 스크립트가 추가됩니다.
중요한 것은 다음 두 가지입니다.

electron:build

빌드 명령. /dist_electron 디렉토리에 Electron 응용 프로그램이나 설치 프로그램이 내보내집니다.

electron:serve

Dev 서버 시작. Electron 창이 열리고 핫 리로드하는 동안 개발할 수 있습니다.

src/background.js

Electron 시작 스크립트 파일이 새로 작성됩니다.
메인 윈도우의 작성이나, 모든 윈도우가 닫혔을 때에 어플리케이션 종료(Mac OS 제외하다)등의 템플리적인 내용에 가세해, 개발시는 기동 후에 DevTools 를 여는, 등의 처리가 쓰여져 있습니다.
덧붙여서 Vue CLI에서 TypeScript를 선택한 프로젝트의 경우 확장자가 제대로 .ts가되어 감탄했습니다.

electron-vue와의 차이

가장 큰 차이점은 디렉토리 구성입니까?
electron-vue 는 /app/src 의 아래가 메인 프로세스용과 렌더러 프로세스용의 디렉토리로 나뉘어져 있습니다만, vue-cli-plugin-electron-builder 는 Vue CLI 의 디렉토리 구성인 채이므로 /src 에 양쪽 모두의 파일이 놓여집니다.

또한 electron-vue는 구성 파일을 세분화하고 있지만 vue-cli-plugin-electron-builder는 Vue CLI 구성 파일 vue.config.js를 사용합니다.

electron-vue도 vue-cli-plugin-electron-builder도 제대로 사용하고 있는 것은 아니므로, 그 밖에도 차이가 있으면 알려주세요.

요약

공식 사이트의 가이드 페이지 에는 , 인스톨 방법으로부터 사용법 , 각종 설정 , 아이콘 작성 방법등의 Tips나 FAQ적인 페이지등이 있어 , 제대로 만들어 들여지고 있어 안심감이 있습니다.
기존 프로젝트에도 간단하게 Electron을 도입할 수 있는 것도 큰 강점이군요.
Vue.js + Electron의 새로운 정평이 될 것 같은 포텐셜을 숨기고 있는 것은 아닐까요.