Vue 2 を使ってみる

以下の流れが理解が速そうです。

JavaScript のライブラリとして扱って、単一の html を作る
　　　　↓
vue-cli を使って node.js ベースの開発をする。

なんで、まずは単一の html で、Vue + vue-router と Vue + vuex でサンプルを作って見ます。

# 単一の html

## vue
早速単一の html を作ってみます。以下のファイルをローカルに作ってブラウザで開きます。

```
<!DOCTYPE html>
<meta charset="UTF-8">
<title></title>
<script src="https://unpkg.com/vue"></script>

<div id="app">
  {{ message }}
</div>

<script>
new Vue({
  el: '#app'
, data: {
    message: 'Hello Vue!'
  }
})
</script>
```
ブラウザに Hello Vie! と表示されれば OK!

公式ページの以下の内容に相当しています。
https://jp.vuejs.org/v2/guide/installation.html#CDN
https://jp.vuejs.org/v2/guide/index.html#宣言的レンダリング
(必要とされるキー以外の名前がプログラム上に現れないように変更してあります。)

## vue + vue-router


```
<!DOCTYPE html>
<meta charset="UTF-8">
<title></title>

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-router"></script>

<div id="app">
  <router-link to="/foo">Go to Foo</router-link>
  <router-link to="/bar">Go to Bar</router-link>
  <router-view></router-view>
</div>

<script>

new Vue({
  router: new VueRouter({
    routes: [
      { path: '/foo', component: { template: '<div>foo</div>' } }
    , { path: '/bar', component: { template: '<div>bar</div>' } }
    ]
  })
}).$mount('#app')

</script>
```

公式ページの以下の内容に相当しています。
https://router.vuejs.org/ja/essentials/getting-started.html
(必要とされるキー以外の名前がプログラム上に現れないように変更してあります。)


## vue + vuex

```
<!DOCTYPE html>
<meta charset='utf-8'>
<title></title>

<script src='https://unpkg.com/vue'></script>
<script src='https://unpkg.com/vuex'></script>

<div id="app">
  {{ $store.state.count }}
  <p>
    <button @click="increment( { amount: 1 } )">+</button>
    <button @click="incAsync( { amount: 2 } )">incAsync</button>
    <button @click="delayed( { amount: 3 } )">delayed</button>
  </p>
</div>

<script>

new Vue({
  el: '#app'
, store: new Vuex.Store({
    state: {
      count: 0
    }
  , mutations: {
      increment: ( state, payload ) => state.count += payload.amount
    }
  , actions: {
      incAsync( { commit }, payload ) {
        return new Promise(
          ( resolve, reject ) => setTimeout(
            () => {
              commit( 'increment', payload )
              resolve()
            }
          , 1000
          )
        )
      }
    }
  })
, methods: Object.assign(
    Vuex.mapMutations( [ 'increment' ] )
  , Vuex.mapActions( [ 'incAsync' ] )
  , { delayed( payload ) {
        this.$store.dispatch( 'incAsync', payload ).then(
          p => this.$store.commit( 'increment', payload )
        )
      }
    }
  )
})
</script>
```

公式ページの以下の内容に相当しています。
http://vuex.vuejs.org/en/state.html
http://vuex.vuejs.org/en/getters.html
http://vuex.vuejs.org/en/mutations.html
http://vuex.vuejs.org/en/actions.html

＋ボタンを押すと、1増えます。
incAsync ボタンを押すと、1秒後に2増えます。
delayed ボタンを押すと、1秒後に6増えます。

# vue-cli ベース

vue-cli は node 上で動くさまざまな vue アプリケーションのテンプレートを作成してくれるツールです。

## node / npm のインストール

こちらから
https://nodejs.org/ja/

## vue-cli のインストール
```
npm i vue-cli -g
```

作成できるテンプレートの一覧を見てみます。

```
$ vue list

  Available official templates:

  ★  browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.
  ★  browserify-simple - A simple Browserify + vueify setup for quick prototyping.
  ★  simple - The simplest possible Vue setup in a single HTML file
  ★  webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.
  ★  webpack-simple - A simple Webpack + vue-loader setup for quick prototyping.

```

### まずは simple のテンプレートを作ってみる。

```
$ vue init simple the_simple 

  This will install Vue 2.x version of the template.

  For Vue 1.x use: vue init simple#1.0 the_simple

? name the_simple
? author sat@example.com

   vue-cli · Generated "the_simple".
```
name と author を入力します。（リターンでデフォルトにしてくれます）

the_simple というディレクトリが作られ、index.html がその中にできます。
このテンプレートは node を使いません。

### 次に webpack-simple のテンプレートを作ってみます。

```
$ vue init webpack-simple the-webpack-simple

  This will install Vue 2.x version of the template.

  For Vue 1.x use: vue init webpack-simple#1.0 the-webpack-simple

? Project name the-webpack-simple
? Project description A Vue.js project
? Author Satoru Ogura <satoru.ogura@me.com>
? Use sass? No

   vue-cli · Generated "the-webpack-simple".

   To get started:
   
     cd the-webpack-simple
     npm install
     npm run dev.

```

以下のファイルができあがります。

```
the-webpack-simple
├── README.md
├── index.html
├── package.json
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   └── main.js
└── webpack.config.js
```


このテンプレートは node を使います。
To get started に書いてある通り

```
$ cd the-webpack-simple
$ npm install
$ npm run dev
```

と実行すると、（ローカルで実行していれば）ブラウザが開いて今作ったページを表示してくれます。
必要なファイルをちょっとみてみます。

```index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>the-webpack-simple</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="/dist/build.js"></script>
  </body>
</html>
```

メインの html で id が app の div のところが、vue によって置き換わっていきます。



続く・・・・http://qiita.com/Satachito/items/2988e4dea236ce1ef644