前提

Node.jsが入っていることを前提にかいています！

インストール

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

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

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

プロジェクトの作成

今回は electron-vue（日本語ドキュメント）を使ってプロジェクトを作成しようと思います。

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

また、最初からすでに　 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押して行けば作れます。

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 を実行すると、ウィンドウが表示されます！

helloページを追加してみる

vue-init 後のディレクトリ構成はこうなってます。基本的には app の中をいじっていきます。

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のドキュメントを読むと router-linkでリンクを貼ればいいことがわかります。

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

保存をすると、Electron側が自動でリロードしてくれます。

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

まとめ

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

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

明日は、@yamanoku さんです！

ElectronでVue.jsを始める

最新のやり方

前提

インストール

プロジェクトの作成

vue init

helloページを追加してみる

まとめ