ElectronでVue.jsを始める

今回は、EletronをVue.jsでどうやって使うか、セットアップをするかを記事に書いていきたいと思います。

このアドベントカレンダーの23日目の、@nakajmgさんと内容が少し被ってしまいそうで申し訳ない気持ちでこの記事を書かせていただきます！

# 最新のやり方
2017年度版の記事を、 @1ntegrale9 さんが書いてくださったので是非ご覧ください！
[2017年度版 electron-vueで始めるVue.js](https://qiita.com/1ntegrale9/items/6e233f03b8cbff0b3c76)

# 前提

Node.jsが入っていることを前提にかいています！
# インストール

まずは、npmから `vue-cli` をインストールします。インストール後、 `vue` コマンドが使えれば成功です。

vue-cliは、Vue.jsの公式のCLIでいい感じのテンプレートを使用してプロジェクトを始めることができます。

```bash
$ npm install -g vue-cli
# インストール後・・・
$ vue -V
2.5.1
```

# プロジェクトの作成

今回は [electron-vue](https://github.com/SimulatedGREG/electron-vue)（[日本語ドキュメント](https://simulatedgreg.gitbooks.io/electron-vue/content/ja/)）を使ってプロジェクトを作成しようと思います。

ドキュメントがすごい充実して驚きました。

<img width="1348" alt="スクリーンショット 2016-12-08 0.30.02.png" src="https://qiita-image-store.s3.amazonaws.com/0/62429/f24973e7-1997-5f95-3ca0-824e95834282.png">

また、最初からすでに　 vue-resource,vue-router,vuexを備えていることもいい点と言えるでしょう。
しかし、vue-resourceについては、公式がこういう記事を出しているので参考にするといいかもしれません。

vue-resource の引退について
https://jp.vuejs.org/2016/11/03/retiring-vue-resource/

## vue init

まずはelectron-vueのREADMEにかかれているGetting Startedに沿って進めて行こうと思います。
基本的にはENTER押して行けば作れます。

```bash
vue init simulatedgreg/electron-vue my-project
? Application Name (my-project) (ENTER)
? Project description (An electron-vue project) (ENTER)
? Which version of Vue.js would you like installed? (Use arrow keys)
❯ 2.x (ENTER)
  1.x
? Select which Vue plugins to install
❯◉ vue-electron (ENTER) # 不必要なものがあればスペースキーで無効にできます。
 ◉ vue-resource
 ◉ vue-router
 ◉ vuex
? Use linting with ESLint? (Y/n)　(ENTER)
? Which eslint config would you like to use? (Use arrow keys)
❯ Standard (https://github.com/feross/standard)　（ENTER)
  AirBNB (https://github.com/airbnb/javascript)
  none (configure it yourself)
? Setup unit testing with Karma + Mocha? (Y/n)　（ENTER)
? Setup end-to-end testing with Spectron + Mocha? (Y/n)　（ENTER)
? author (Takumi Sato <__________@gmail.com>)　（ENTER)

   vue-cli · Generated "my-project".

   ---

   All set. More configurations can be made at my-project/config.js.

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

   Next steps:

     1. cd my-project
     2. npm install
     3. npm run dev

cd my-project
npm install
npm run dev
```

セットアップが終わり、最後の `npm run dev` を実行すると、ウィンドウが表示されます！

<img width="804" alt="スクリーンショット 2016-12-08 0.50.43.png" src="https://qiita-image-store.s3.amazonaws.com/0/62429/84929168-a6a2-d8a9-9c5c-a91257aadb16.png">

# helloページを追加してみる

 `vue-init` 後のディレクトリ構成はこうなってます。基本的には `app` の中をいじっていきます。
<img width="197" alt="スクリーンショット 2016-12-08 0.51.50.png" src="https://qiita-image-store.s3.amazonaws.com/0/62429/0d4470da-821d-75d1-bae1-dcb389ff6ca1.png">


`app/src/components` の中に `Hello.vue` を作り下記の内容で保存します。

```Hello.vue
<template>
  <div>
    <h1>ようこそ！</h1>
  </div>
</template>

<script>
  export default {
    name: 'hello-page'
  }
</script>
```

そして、 `app/src/routes.js` に

```routes.js
  {
    path: '/hello',
    name: 'hello-page',
    component: require('components/Hello')
  },
```
を追加します。これで、 `/hello`でようこそ！が表示されるはずです。
確認をするために `app/src/components/LandingPageView/Links.vue` を編集して`/hello` へのリンクを追加します。
vue-routerの[ドキュメント](https://router.vuejs.org/ja/)を読むと `router-link`でリンクを貼ればいいことがわかります。

```html
   <li><router-link to="hello">Hello</router-link></li>
```

保存をすると、Electron側が自動でリロードしてくれます。
<img width="546" alt="スクリーンショット 2016-12-08 1.06.50.png" src="https://qiita-image-store.s3.amazonaws.com/0/62429/40ed727e-08f8-cd19-dd6b-26baa391c22a.png">

Helloへのリンクが表示されたことが確認できました。
クリックするとちゃんと遷移することがわかります。

<img width="805" alt="スクリーンショット 2016-12-08 1.12.05.png" src="https://qiita-image-store.s3.amazonaws.com/0/62429/cbfff2c8-8fd7-a62e-9551-f1593f87d72a.png">

# まとめ
今回の、Vue.jsをElectronで使うテンプレートはVue.jsを使う上で便利な技術が詰まっているような感じです。(vuex,vue-router等） 

基本的にはVue.jsはWebで扱うものという認識だと思いますが、Electronを使って違った方向でVue.jsを活用・学習できるといいのかなと思いました。

明日は、@yamanoku さんです！