소개

Vue.js와 TypeScript 및 Electron에서 데스크톱 애플리케이션을 개발할 때 필요한 단계를 잊어 버린 것으로 작성합니다.

vue-cli3 설치

프로젝트를 만들기 전에 @vue/cli를 전역 설치합니다.

$ npm install -g @vue/cli

2.x계를 사용하고 있는 분은 일단 언인스톨하고 나서 인스톨 해 주세요.

$ npm uninstall -g vue-cli
$ npm install -g @vue/cli

vue create로 앱 편지지 만들기

$ vue create my-app

현재 디렉토리에 my-app라는 디렉토리가 작성됩니다.my-app 부분을 원하는 이름으로 변경하십시오.
이후는 여기에서 작성한 디렉토리 안에서 작업을 실시합니다.

위의 명령을 실행하면 몇 가지 질문이 있습니다.
이번에는 TypeScript를 이용하고 싶으므로 Manually select features를 선택하고 아래와 같이 설정했습니다.

? Check the features needed for your project:
> Babel
> TypeScript
> Router
> Vuex
> CSS Pre-processors
> Linter / Formatter

? Use class-style component syntax?
> Yes

? Using Babel alongside Typescript?
> Yes

? Use history mode for router?
> No

? Pick a CSS pre-processor:
> Sass/SCSS (with node-sass)

? Pick a linter / formatter config:
> ESLint with error prevention only

? Pick additional lint features:
> Lint on save

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?
> In dedicated config files

? Save this as a preset for future projects?
> No

다음 섹션 Electron을 설치할 때 사용하는 Vue CLI Plugin Electron Builder 은 VueRouter가 history 라고 잘 동작하지 않기 때문에 hash 모드로 하고 있습니다.history 로 했을 때는 src/router.ts 를 다음과 같이 편집합니다.

// src/router.ts
...
export default new Router({
-  mode: 'history',
+  mode: process.env.IS_ELECTRON ? 'hash' : 'history',
  ...
})
...

브라우저에서 http://localhost:8080/로 이동하여 성공적으로 시작되었는지 확인합니다.

Electron 설치

$ vue add electron-builder

위의 명령을 실행하면 Electron (및 종속 패키지)이 설치되고 일부 파일이 추가되고 업데이트됩니다.
중요한 것은 다음 파일입니다.

package.json

...
"scripts": {
+   "electron:build": "vue-cli-service electron:build",
+   "electron:serve": "vue-cli-service electron:serve",
},
+  "main": "background.js",
...

electron:build 및 electron:serve라는 스크립트가 추가되었습니다.
이렇게 하면 개발 서버를 시작하거나 응용 프로그램을 빌드할 수 있습니다.

개발 서버 시작

$ npm run electron:serve

애플리케이션 빌드

$ npm run electron:build

요약

이번에는 Vue.js + TypeScript + Electron에서 응용 프로그램을 시작할 때까지 설명했습니다.
다음부터는 TypeScript에서 Vue 컴포넌트를 작성하는 방법과 VueRouter, Vuex, axios와 조합하는 방법 등을 소개하려고합니다.