소개

Vue.js + Electron 프로젝트를 시작할 때 사용한 Vue CLI와 electron-vue ボイラープレート의 조합이 매우 좋았기 때문에 기사를 썼습니다.

주요 항목은 다음 3 점입니다.

Electron + Vue.js 프로젝트 시작

응용 프로그램 시작시 루트 구성 요소 변경

Vue Router를 사용한 구성 요소 간 전환

이 기사대로 작성한 프로젝트를 GitHub에 공개하고 있으므로 참고하십시오.
htps : // 기주 b. 코 m / y4 시로 / ゔ 에에 ct

환경

OS: macOS Sierra 10.12.6

Node.js: v10.13.0

npm: 6.4.1

yarn: 1.12.1

사용한 라이브러리

vuejs/vue-cli

SimulatedGREG/electron-vue

Electron + Vue.js 프로젝트 시작

이번에는 Vue CLI 2.x를 사용하고 있습니다.Vue CLI 3.x이 출시되었으므로 관심이 있으시면 시도해보십시오.

Vue CLI 설치

$ npm install -g vue-cli

# Vue CLI のバージョンを確認
$ vue --version
2.9.6

Vue CLI에서 electron-vue 보일러 플레이트를 지정하여 프로젝트를 만듭니다.

마법사 형식으로 라이브러리를 배포합니다.

Webpack

Vuex

VueRouter

Eslint

다양한 테스트 도구

등의 도입을 간단하게 실시할 수 있습니다.

$ vue init simulatedgreg/electron-vue vue-electron-sample

? Application Name vue-electron-sample
? Application Id com.example.yourapp
? Application Version 0.0.1
? Project description An electron-vue project
? Use Sass / Scss? Yes
? Select which Vue plugins to install (Press <space> to select, <a> to toggle all, <i> to invert selection)axios, vue-electron, vue-router, vuex, vuex-electron
? Use linting with ESLint? Yes
? Which ESLint config would you like to use? Airbnb
? Set up unit testing with Karma + Mocha? No
? Set up end-to-end testing with Spectron + Mocha? No
? What build tool would you like to use? builder
? author y4shiro <[email protected]>

   vue-cli · Generated "vue-electron-sample".

---

All set. Welcome to your new electron-vue project!

Make sure to check out the documentation for this boilerplate at
https://simulatedgreg.gitbooks.io/electron-vue/content/.

Next Steps:

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

종속성을 설치하고 애플리케이션 실행

프로젝트 작성이 완료되면 다음 명령을 실행하여 dev server 실행을 확인합니다.$ yarn run dev를 실행하면 응용 프로그램이 시작되고 다음 창이 표시됩니다.

$ cd vue-electron-sample
$ yarn # １０分近くかかることもあるので、気長に待つ
$ yarn run dev

개발 시 작업할 디렉토리

Electron은 애플리케이션을 시작할 때 main process와 renderer process의 두 가지 프로세스를 실행합니다.
그것에 따라 디렉토리도 나뉘어져 있으며,src/main/에서 응용 프로그램 관리,src/renderer/ 에서는 윈도우(UI)의 렌더링 등을 담당합니다.

src/
├── index.ejs
├── main
│   ├── index.dev.js
│   └── index.js
└── renderer
    ├── App.vue
    ├── assets
    │   ├── .gitkeep
    │   └── logo.png
    ├── components
    │   ├── LandingPage
    │   └── LandingPage.vue
    ├── main.js
    ├── router
    │   └── index.js
    └── store
        ├── index.js
        └── modules

애플리케이션 시작 시 루트 구성 요소 변경

electron-vue 보일러 플레이트에서 프로젝트를 만든 경우,
시작 시 src/renderer/App.vue가 표시됩니다.
App.vue를 열면 <router-view>가 로드되었는지 확인할 수 있습니다.

src/renderer/App.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    name: 'vue-electron-sample',
  };
</script>

<style>
  /* CSS */
</style>

Vue.js의 공식 라우터 Vue Router가 기본적으로 내장되어 있으며,src/renderer/components/LandingPage.Vue가 루트 구성 요소로 지정되었습니다.

src/renderer/router/index.js

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'landing-page',
      component: require('@/components/LandingPage').default,
    },
    {
      path: '*',
      redirect: '/',
    },
  ],
});

이번에는 시도
- src/renderer/components/MainPage.vue 추가
- src/renderer/router/index.js 편집
하고 루트 구성 요소를 변경해 봅시다.

src/renderer/components/MainPage.vue

<template>
  <div>
    <h1>MainPage です</h1>
  </div>
</template>

<script>
  export default {
    name: 'main-page',
  };
</script>

<style>
</style>

src/renderer/router/index.js

export default new Router({
  routes: [
     {
       path: '/',
-      name: 'landing-page',
-      component: require('@/components/LandingPage').default,
+      name: 'main-page',
+      component: require('@/components/MainPage').default,
     },
  ],
});

응용 프로그램을 시작하면 변경된 루트 구성 요소가 표시됩니다.

Vue Router를 사용한 구성 요소 간 전환

전항에서 추가한 MainPage.vue 이외에,

MainPage.vue에 <router-link> 태그 추가

AboutPage.vue 추가,

src/renderer/router/index.js 편집

를 수행하고 구성 요소 간의 전환을 구현합니다.

src/renderer/components/MainPage.vue

<template>
  <div>
    <h1>MainPage です</h1>
+   <router-link to="/About">Go to AboutPage</router-link>
  </div>
</template>

src/renderer/components/AboutPage.vue

<template>
  <div>
    <h1>AboutPage です</h1>
    <router-link to="/">Go to MainPage</router-link>
  </div>
</template>

<script>
  export default {
    name: 'about-page',
  };
</script>

<style>
</style>

src/renderer/router/index.js

export default new Router({
  routes: [
     {
       path: '/',
       name: 'main-page',
       component: require('@/components/MainPage').default,
     },
+    {
+      path: '/about',
+      name: 'about-page',
+      component: require('@/components/AboutPage').default,
     },
  ],
});

요약

Vue CLI 덕분에 Vue.js 프로젝트의 출시가 굉장히 쉬워지기 때문에,
Electron 이외의 프로젝트에서도 꼭 이용해 보세요.

당초에는 다음 항목도 기술할 예정이었지만,
기사가 중복되기 때문에 개발시의 지견도 포함하여 다른 기사를 올릴 예정입니다.

Electron 빌드 주위

사용한 라이브러리

참고 문서

Vue CLI 3

Introduction · electron-vue

Introduction | Vue Router

Electron Documentation