소개

vue-electron을 사용하여보고 싶었기 때문에 사용해 본 메모입니다.
Vue.js 공식 예제 Markdown 편집기를 vue-electron으로 만들고 분위기를 이해하려고합니다.

프로젝트 만들기

2017년도판 electron-vue로 시작하는 Vue.js 를 참고로 프로젝트를 만듭니다.

$ vue init simulatedgreg/electron-vue vue-markdown

※프로젝트의 설정은 할애

생성된 프로젝트의 디렉토리 구조

.
├── README.md
├── appveyor.yml
├── build # ビルドされたアプリの格納場所
│   └── icons
│       ├── 256x256.png
│       ├── icon.icns
│       └── icon.ico
├── dist # web用buildの格納先（？）
│   ├── electron
│   └── web
├── package.json
├── src
│   ├── index.ejs
│   ├── main
│   │   ├── index.dev.js
│   │   └── index.js
│   └── renderer
│       ├── App.vue
│       ├── assets
│       │   └── logo.png
│       ├── components # 基本ここでアプリの中身を作る
│       │   ├── LandingPage
│       │   │   └── SystemInformation.vue
│       │   └── LandingPage.vue
│       ├── main.js
│       ├── router # vue-router
│       │   └── index.js
│       └── store # Vuex
│           ├── index.js
│           └── modules
│               ├── Counter.js
│               └── index.js
├── static
└── test
    ├── e2e # E2Eテスト
    │   ├── index.js
    │   ├── specs
    │   │   └── Launch.spec.js
    │   └── utils.js
    └── unit # ユニットテスト
        ├── index.js
        ├── karma.conf.js
        └── specs
            └── LandingPage.spec.js

20 directories, 24 files

마이치, dist 의 존재 의의를 모르겠습니다.

개발 모드로 시작

개발 모드로 부팅하려면 다음 명령을 실행합니다.

$ npm run dev

핫 리로드가 붙어 있으므로 편집 내용에 따라 실시간으로 변경이 적응됩니다.

빌드

프로덕션용으로 애플리케이션을 빌드하려면 다음 명령을 실행하십시오.

$ npm run build

다음과 같이 데스크톱 응용 프로그램으로 build 폴더 아래에 출력됩니다.

build
├── electron-builder.yaml
├── icons
├── mac
├── vue-markdown-0.0.0-mac.zip
├── vue-markdown-0.0.0.dmg
└── vue-markdown-0.0.0.dmg.blockmap

2 directories, 4 files

공식 예제를 기반으로 Markdown 에디터 만들기

Vue.js Markdown 편집기의 예 을 바탕으로 vue-electron 으로 바퀴를 재발명합니다.

MarkdownPage.vue 만들기

components 다음 파일을 모두 삭제하여 MarkdownPage.vue를 만듭니다.

components
└── MarkdownPage.vue

0 directories, 1 file

marked를 도입하여 MarkdownPage.vue에 작성

Markdown 파서 라이브러리 marked을 소개합니다.

$ npm install marked --save

그런 다음 공식 예제를 참조하여 MarkdownPage.vue를 편집합니다.

MarkdownPage.vue

<template>
  <div id="editor">
    <textarea :value="input" @input="update"></textarea>
    <div v-html="compiledMarkdown"></div>
  </div>
</template>

<script>
import marked from 'marked';

export default {
  data() {
    return {
      input: '# hello',
    };
  },
  computed: {
    compiledMarkdown() {
      return marked(this.input, { sanitize: true });
    },
  },
  methods: {
    update(e) {
      this.input = e.target.value;
    },
  },
};
</script>

<style>
html, body, #editor {
  margin: 0;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  color: #333;
}

textarea, #editor div {
  display: inline-block;
  width: 49%;
  height: 100vh; // 公式では % ですが、うまく表示されないので vh にします
  vertical-align: top;
  box-sizing: border-box;
  padding: 0 20px;
}

textarea {
  border: none;
  border-right: 1px solid #ccc;
  resize: none;
  outline: none;
  background-color: #f6f6f6;
  font-size: 14px;
  font-family: 'Monaco', courier, monospace;
  padding: 20px;
}

code {
  color: #f66;
}
</style>

vue-router 편집

마지막으로 router를 편집합니다.

router/index.js

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

Vue.use(Router);

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

완성

결론

메모 쓰기 정도입니다만, vue-electron 로 markdown 에디터를 만드는 곳까지 해 보았습니다. vue-electron 은 도입이 간단하기 때문에, 곧바로 어플리케이션의 개발을 스타트 할 수 있어 좋은 인상이었습니다. Vue.js 를 사용한 적이 있으면, src 이하는 Vue.js 의 템플릿의 디렉토리 구조와 같기 때문에, 특히 위화감 없이 시작된다고 생각합니다.