electron-nuxt를 사용하여 데스크톱 애플리케이션 만들기

Nuxt.js Advent Calendar 2019 10일째 의 기사입니다.

Nuxt.js에서 조금 떨어져 버립니다만 이번은, 전부터 신경이 쓰이고 있던 electron-nuxt를 사용해 데스크탑 어플리케이션을 만들어 보았던 기사를 쓰려고 생각합니다.
이번 기사에서는 아키텍처의 이야기 등, 세세한 부분에 관해서는 하지 않을 예정이므로 양해 바랍니다.

프로젝트 만들기

vue가 들어 있지 않은 분은 먼저 vue-cli를 install하는 곳에서 시작합니다.

npm install -g vue-cli

or

yarn global add vue-cli

그런 다음 프로젝트를 만듭니다.
프로젝트 작성은 기본 Nuxt.js 프로젝트 작성과 크게 다르지 않습니다.

vue init michalzaq12/electron-nuxt

? Application Name (example-electron-nuxt) 

? Application Id (com.example.yourapp) 

? Application Version (0.0.1)

? Project description (An electron-nuxt project) 

? Author (Kazuhiro Ebara <***@gmail.com>) 

? Select which ui-components framework install (Use arrow keys)
❯ none 
  Vuetify (https://vuetifyjs.com) 
  Buefy (https://buefy.org) 
  Element (https://element.eleme.io) 

? Select which css pre-processor install (Use arrow keys)
❯ none 
  Sass (scss) 
  LESS 
  Stylus 

? Select which icon set install (Use arrow keys)
❯ none 
  Material Design Icon (https://materialdesignicons.com/) 
  Font Awesome 5 (https://fontawesome.com/icons) 

? Use typescript? (y/N) 

? Use linting with ESLint? (y/N) 

? Set up unit testing with vue-test-utils + AVA? (y/N) 

? Set up end-to-end testing with Spectron + AVA? (y/N)


   vue-cli · Generated "example-electron-nuxt".
   vue-cli · All set. Welcome to your new electron-nuxt project! 

    Make sure to check out the documentation at
    https://github.com/michalzaq12/electron-nuxt#documentation 

    To get started:
         cd example-electron-nuxt
         npm install
         npm run dev 

프로젝트 작성은 이상으로 완료됩니다.

프로젝트를 시작하면 다음과 같은 데스크톱 응용 프로그램이 시작됩니다.



프로젝트 작성은 이상입니다.

파일 트리

구조 자체는 간단합니다.
Nuxt.js와 마찬가지로 renderer 아래에 있는 page 디렉토리에서 page를 만들거나 components 아래에서 component를 관리하는 형태가 됩니다.

$ tree -L 3 -I node_modules
.
├── README.md
├── ava.config.js
├── build
│   └── icons
│       ├── 128x128.png
│       ├── 16x16.png
│       ├── 24x24.png
│       ├── 256x256.png
│       ├── 32x32.png
│       ├── 48x48.png
│       ├── 64x64.png
│       ├── 96x96.png
│       ├── icon.icns
│       └── win-icon.ico
├── builder.config.js
├── dist
│   └── main
│       └── index.js
├── package.json
├── src
│   ├── main
│   │   ├── BrowserWinHandler.js
│   │   ├── index.dev.js
│   │   ├── index.js
│   │   ├── mainWindow.js
│   │   └── tsconfig.json
│   ├── renderer
│   │   ├── assets
│   │   ├── components
│   │   ├── index.d.ts
│   │   ├── layouts
│   │   ├── nuxt.config.js
│   │   ├── pages
│   │   ├── plugins
│   │   ├── store
│   │   └── tsconfig.json
│   └── resources
│       ├── electron-nuxt.png
│       └── external-file.txt
├── test
│   ├── e2e
│   │   ├── ava.config.js
│   │   ├── helpers.js
│   │   ├── nuxt-spectron.d.ts
│   │   ├── setup.js
│   │   └── specs
│   └── unit
│       ├── alias.js
│       ├── ava.config.js
│       ├── setup.js
│       └── specs
└── yarn.lock

페이지 만들기

Nuxt.js와 마찬가지로 renderer 아래의 페이지에 파일을 만듭니다.
이번에는 시험에 hoge라는 파일을 만들었습니다.

$ tree -L 3 src/renderer/pages
src/renderer/pages
├── hoge.vue
└── index.vue

페이지 아래에 파일을 만들면 router.js의 routes 부분에 새 경로가 추가됩니다.

routes.js

export const routerOptions = {
  mode: 'hash',
  base: decodeURI('/'),
  linkActiveClass: 'nuxt-link-active',
  linkExactActiveClass: 'nuxt-link-exact-active',
  scrollBehavior,

  routes: [{
    path: "/hoge",
    component: _16245e3e,
    name: "hoge"
  }, {
    path: "/",
    component: _3a6ef246,
    name: "index"
  }],

  fallback: false
}

routing도 Nuxt.js와 마찬가지로 자동으로 해줍니다.

page의 전이도 Nuxt.js와 같이, nuxt-link 를 사용하면 할 수 있습니다.

창 크기 변경

윈도우 사이즈의 변경은 main 디렉토리내에 있는 mainWindow.js 파일의 new BrowserWinHandler 부분의 값을 만지면 윈도우 사이즈를 변경할 수 있습니다.

mainWindow.js

import path from 'path'
import BrowserWinHandler from './BrowserWinHandler'
const isDev = process.env.NODE_ENV === 'development'

const INDEX_PATH = path.join(__dirname, '..', 'renderer', 'index.html')
const DEV_SERVER_URL = process.env.DEV_SERVER_URL // eslint-disable-line prefer-destructuring

const winHandler = new BrowserWinHandler({
  height: 600,
  width: 1000
})

winHandler.onCreated(browserWindow => {
  if (isDev) browserWindow.loadURL(DEV_SERVER_URL)
  else browserWindow.loadFile(INDEX_PATH)
})

export default winHandler

변경 후 핫 재로드로 자동으로 변경 사항이 반영됩니다.

끝에

처음으로 electron-nuxt를 사용해 보았습니다만, Nuxt.js를 사용한 적이 있는 사람이라면 거기까지 집착하는 요소는 없을까라고 생각했습니다.
다만, electron의 아키텍쳐를 확실히 알고 있지 않으면, 실운용하는 경우는 어려울까라고 생각합니다.

앞으로도 조금 electron-nuxt를 만지려고 생각하기 때문에, 그 때는 또 기사로 할까 생각합니다.

쓴 코드는 여기 에 만들었으므로, 신경이 쓰이는 분은 봐 주세요.