[Electron Vue js] Ubuntu 데스크탑 프로그램 개발 예제

티스토리 뷰

C++ 200제/코딩 IT 정보

[Electron Vue js] Ubuntu 데스크탑 프로그램 개발 예제

vicddory 2020. 2. 13. 07:00

예제 시작하기

Electron는 Web 어플리케이션 개발에 사용되는 Javascript, HTML, CSS 등의 기술을 사용하여 데스크탑 응용 프로그램을 개발할 수 있는 프레임워크입니다. 하나의 소스로 크로스 플랫폼(Windows, Mac OS, Linux) 데스크톱 응용 프로그램을 개발할 수 있습니다. 이 포스트에서는 Ubuntu에서 Electron과 Vue.js를 이용한 데스크톱 애플리케이션 개발을 시작하는 데 필요한 도구의 설치 절차와 실제로 데모 프로그램 실행하기까지를 정리합니다.

결과는?

다음과 같이 디폴트 상태의 Vue js + electorn 응용 프로그램을 시작하는 것까지를 정리합니다.

구동 환경

다음과 같습니다.

운영체제 OS : Ubuntu 18.04
Node 환경은 구축 완료. 여기에서는 v10.16.0

사용하는 패키지

Electron에서 Vue.js을 사용할 경우의 몇 가지 선택 사항이 있지만, 여기에서는 Vue CLI 3에 해당하는 Vue CLI Plugin Electron Builder를 사용합니다. 공식 Repository(저장소 레파지토리)는 다음과 같습니다.

nklayman / vue-cli-plugin-electron-builder
A Vue Cli 3 plugin for Electron with no required configuration

또한, Vue CLI 3을 아직 지원하지 않지만, 아마도 가장 많이 사용되는 보일러 플레이트(이른바 템플릿)로 다음 electron-vue가 있습니다.

SimulatedGREG/electron-vue
An Electron&Vue.js quick start boilerplate with vue-cli scaffolding, common Vue plugins, electron-packager/electron-builder, unit/e2e testing, vue-devtools, and webpack.

예제 준비

Vue CLI Plugin Electron Builder는 Vue CLI 3로 생성된 프로젝트에 플러그인으로 추가하여 사용합니다. 따라서, Vue CLI 3를 설치하고 Vue CLI 3를 사용하여 프로젝트를 생성할 필요가 있습니다.

다음 명령으로 Vue CLI 3를 설치합니다.

$ npm install -g @vue/cli

다음 명령으로 프로젝트를 만듭니다. 아래와 같이 default(babel, eslint) - Manually select features 2가지 옵션이 표시됩니다. 만약 TypeScript과 Vuex 등을 사용하고 싶다면 Manually select features를 선택 후 원하는 옵션을 선택해서 지정해야 합니다.

$ vue create my-app
Vue CLI v3.8.2
? Please pick a preset: (Use arrow keys)
❯ default (babel, eslint) 
  Manually select features 

위에서 Manually select features를 선택하면 다음과 같은 선택 사항이 표시되므로, 필요한 걸 체크하고 Enter를 누르세요.

? Check the features needed for your project:
  (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◯ Router
 ◯ Vuex
 ◯ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

또한 다음과 같이 위에서 지정한 내용에 따라 몇 가지 추가 질문이 나타나면 적절한 답변을 선택합니다.

Vue CLI v3.8.2
? Please pick a preset: Manually select features
? Check the features needed for your project:
  Babel, TS, Router, Vuex, CSS Pre-processors, Linter
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode,
  auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router?
  (Requires proper server setup for index fallback in production)
  : No
? Pick a CSS pre-processor
  (PostCSS, Autoprefixer and CSS Modules are supported by default)
  : Sass/SCSS (with node-s
ass)
? Pick a linter / formatter config: Standard
? Pick additional lint features:
  (Press <space> to select, <a> to toggle all, <i> to invert selection)
  Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?
  In package.json
? Save this as a preset for future projects? (y/N)N

또한, 위에서 Router 사용하도록 지정한 경우에 나오는 질문인 Use history mode for router?의 대답으론 No가 좋다고 합니다. 이 플러그인 개발자님의 답변에 따르면, Electron는 History mode에서 잘 동작하지 않는데요. 아래에 자세한 내용이 있습니다.

nklayman/vue-cli-plugin-electron-builder
assets not working

마지막으로 다음과 같이 표시되면 완료입니다.

$ vue create my-app

(...중간생략...)

📄  Generating README.md...

🎉  Successfully created project my-app.
👉  Get started with the following commands:

 $ cd my-app
 $ npm run serve

 WARN  Skipped git commit due to missing username and email in git config.
You will need to perform the initial commit yourself.

my-app이라는 폴더가 생성되었기에, 그 폴더로 이동하여 Vue CLI Plugin Electron Builder를 설치합니다.

$ cd my-app
$ vue add electron-builder

위를 실행하면 도중에 Electron 버전을 지정하라는 메시지가 표시됩니다. 여기에서는 디폴트의 5.0.0를 사용하여 진행합니다.

my - app
$ vue add electron-builder

(...중간생략...)

✔  Successfully installed plugin: vue-cli-plugin-electron-builder

? Choose Electron Version (Use arrow keys)
  ^3.0.0 
  ^4.0.0 
❯ ^5.0.0

5.0.0을 선택하면 다운로드가 시작되니 조금 기다립니다. 마지막으로 다음과 같이 표시되면 완료된 겁니다.

my-app
$ vue add electron-builder

(...중간생략...)

⚓  Running completion hooks...

✔  Successfully invoked generator for plugin: vue-cli-plugin-electron-builder
   The following files have been updated / added:

     src/background.js
     .gitignore
     package-lock.json
     package.json

   You should review these changes with git diff and commit them.

이렇게 완료되었습니다.

데모 프로그램 시작

다음 명령을 실행합니다.

my-app
$ npm run electron:serve

(...중간생략...)

 DONE  Compiled successfully in 475ms

  File                      Size                     Gzipped

  dist_electron/index.js    650.59 KiB               148.65 KiB

  Images and other types of assets omitted.

 INFO  Launching Electron...

다음과 같이 앱이 표시됩니다. 다행히 한 번에 Electron + Vue js 응용 프로그램 동작을 확인할 수 있었습니다.

만약, 내가 응용 프로그램을 시작할 때 System limit for number of file watchers reached 같은 오류 메시지가 나올 수 있는데요.

원인은 Electron + Vue js 데스크톱 응용 프로그램 개발을 위해 Vue CLI Plugin Electron Builder라는 플러그인을 사용하면, 앱 시작 시 System limit for number of file watchers reached라는 오류 메시지가 보일 수 있습니다. 이 오류는 Vue CLI Plugin Electron Builder를 사용한 경우에 국한된 것이 아니라, Visual Studio Code와 Node.js를 사용하는 경우, Linux를 사용하는 경우, 파일 모니터링 작동하는 경우에 발생하는 것으로 보입니다.

Electron 앱 디렉토리 구성에 대해

작성한 my-app 디렉터리에 src라는 폴더가 다음과 같은 구조로 되어 있습니다. 다음은 TypeScript를 사용하는 경우이지만, 구성이 Vue.js 응용 프로그램과 똑같다는 것을 알 수 있습니다.

./my-app/src
$ tree .
.
├── App.vue
├── assets
│   └── logo.png
├── background.ts
├── components
│   └── HelloWorld.vue
├── main.ts
├── router.ts
├── shims-tsx.d.ts
├── shims-vue.d.ts
├── store.ts
└── views
    ├── About.vue
    └── Home.vue