Vue CLIでHelloWorld

# Index
[1.VueCLIでHelloWorld](http://qiita.com/MariMurotani/items/5fbea5942d2edf149989)
[2.VueJSでフォームを使おう](http://qiita.com/MariMurotani/items/10702fbcae2997fcae80)
[3.VueJSで単一ファイルコンポーネント](http://qiita.com/MariMurotani/items/8694bce9e29e1593a488)
[4.VueJSでAPI通信](http://qiita.com/MariMurotani/items/a8576974deeabf9daf6e)
[5.VueJSで猫検索アプリ作成](http://qiita.com/MariMurotani/items/86a4b267489df3b83c61)
[6.おまけ](https://qiita.com/MariMurotani/items/3496e461e8f4f5545ff2)
[7.おまけ Rails x Vue.js](https://qiita.com/MariMurotani/items/f040e3ce23ece18d50df)
[8.おまけ Rails x Vue.js x VueX](https://qiita.com/MariMurotani/items/47e4913dfeace5cc5f02)
-----


Vue.jsをお手軽に始められる[VueCLI](https://jp.vuejs.org/2015/12/28/vue-cli/
)を使って実装を始めます。
とってもお手軽なMVVCフレームワークでコンポーネント(部品)の管理が容易でしかも覚えやすいと評判なので早速試してみましょう。
# 前提条件
- HTML,CSS,Javascriptの経験者
- [NPMをインストール](http://qiita.com/jaxx2104/items/2277cec77850f2d83c7a)している事
- MACユーザー
- ChromeWebDebug機能が使える状態
- [VueJSのデバッガ](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd/related?utm_source=chrome-ntp-icon)も入れておきましょう
- vue --version 2.8.1
- npm --version 3.10.8
- JS記述式はES6

# 1.環境構築
## 1.1.VueCLIのインストール
Node環境には詳しくないので、ぱっと使えるCLIツールで環境構築を片付けます。

```
npm install -g vue-cli
vue init webpack my-project
cd my-project
npm install
npm run dev
```

成功すると8080にアクセスできます
![スクリーンショット 2017-02-27 21.21.55.png](https://qiita-image-store.s3.amazonaws.com/0/89997/9b1139aa-149d-94e8-5a6f-c8c807a015bb.png)

Docs for This Templateをクリックしてドキュメントを確認しましょう。

![スクリーンショット 2017-02-27 21.25.20.png](https://qiita-image-store.s3.amazonaws.com/0/89997/a98c2ac7-8e1a-0a72-a104-6db0eeb24483.png)
上記のようなディレクトリが自動的に作成されます。
シングルページアプリケーションなので、index.htmlが一つだけ設定されています。

## 1.2. SCSSを有効化
```
npm install sass-loader node-sass --save-dev
```
srcに移動して上記コマンドの実行をしましょう。
これをする事でlang="scss"、lang="sass"をstyleに指定できるようになります。

```scss
<style lang="scss">
/* write SASS! */
</style>
```
# 2.コーディング
[サンプルコード1](https://github.com/MariMurotani/my-project/tree/01_helloworld)
##  2.1. TOPページを編集してみる
- [ここからのコード](https://github.com/MariMurotani/my-project.git)
srcに移動してHelloWorldをしていきましょう。
まずは、src/components/の下にあるHello.vueをコピーしてScene1.vueを作成します。
下記の記述を見つけて、msgを書き換えましょう。

```javascript
    return {
      msg: 'コピーしたHello'
    }
```

src/router/index.jsに[ルーティング](https://router.vuejs.org/ja/essentials/getting-started.html
)の設定をします。
今回はHelloを自作のScene1に差し替えしましょう。

```javascript:index.js
import Vue from 'vue'
import Router from 'vue-router'
import Scene1 from '@/components/Scene1'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Scene1',
      component: Scene1
    }
  ]
})
```

上記のように書き換えをして、
http://localhost:8080/
にアクセスすると、「コピーしたHello」と表示されます。

## 2.2. Sceneを更に追加
src/components/の下にScene2.vueを追加しましょう。

```html:Scene2.vue
<template>
  <h2>シーン２だよ</h2>
</template>
```
router/index.jsにScene2を追加します。

```javascript:router/index.js
import Scene2 from '@/components/Scene2'

....
    {
      path: '/scene2',
      name: 'Scene2',
      component: Scene2
    }
....
```

Scene1.vueの中に[リンク](https://vuejs.org/v2/guide/migration-vue-router.html#v-link-replaced)を追加します。

```html:Scene1.vue
<router-link to="/scene2">Scene2にいくよ！</router-link>
```

ページ上に現れた、Scene2に行くよリンクから、Scene2だよのページに遷移する事ができます。

![スクリーンショット 2017-02-27 22.26.15.png](https://qiita-image-store.s3.amazonaws.com/0/89997/68b2fe1b-f47b-0882-a3e7-865c3654cb48.png)

## 2.3. ヘッダーを変えてみる
-[ここからのコード](https://github.com/MariMurotani/my-project.git)

常に、vueのロゴが表示されているのが気になりますね。
こちらがどこに記述されているのか調べて変更してみましょう。
App.viewはｓｒｃ/main.jsのnew Vue(..)の中で「#app」エレメントの部分に置換されるように記述がしてあります。
さらに、「#app」エレメントはindex.htmlタグのbodyに記載されており、こちらがトップレベルの要素になります。

````html:index.html
 <div id="app"></div>
````

App.vueに戻ってみます。

```html:App.vue
<router-view></router-view>
```
こちらの[router-view](https://github.com/MariMurotani/my-project/tree/02_customize_header)タグには
export default new Router(...)で指定したコンポーネントが置換されます。
router-viewの部分以外を好きなようにカスタマイズします。

今回は共通ヘッダーと共通フッダーをつけていきます。
「Step 2. SCSSを有効化」でscssを有効にしたので、
**<style lang="scss">**を忘れずにつけましょう。


```html:App.vue
<template>
  <div id="app">
    <div class="header">
      <img class="img" src="./assets/logo.png">
      <p class="title">Cat LOVER <span>vue</span></p>
    </div>
    <div class="content">
      <router-view></router-view>
    </div>
    <div class="footer">
      <h2>Cat LOVER Co., Ltd.</h2>
      <ul>
        <li><a href="" target="_blank">TOP</a></li>
        <li><a href="" target="_blank">リクルート</a></li>
        <li><a href="" target="_blank">アクセス</a></li>
        <li><a href="" target="_blank">会社概要</a></li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style lang="scss">
html {
  height: 100%;
}
body{
  height: 100%;
  margin: 0;
  background-color: silver;
  text-align: center;
}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: block;
  color: #2c3e50;
  background-color: white;
  width: 80%;
  margin: 0 auto;
  min-width: 600px;
  margin: 0 auto;
  height: 100%;
}
.header {
  display: block;
  .img {
    display: inline-block;
    width: 15%;
    left: 20%;
    display: inline-block;
  }
  .title{
    display: inline-block;
    width: 30%;
    font-size:2rem;
    span{
      font-size: 2.5rem;
      text-shadow: 1px 1px 3px #000;
    }
  }
}
.footer{
  display: block;
  position: absolute;
  bottom: 0%;
  width: 80%;
  min-width: 600px;
  h1, h2 {
    font-weight: normal;
  }
  ul {
    list-style-type: none;
    padding: 0;
  }
  li {
    display: inline-block;
    margin: 0 10px;
  }
  a {
    color: #42b983;
  }
}
</style>
```

こんな感じでキレイに外側のレイアウトを作れました。
![ようそ.png](https://qiita-image-store.s3.amazonaws.com/0/89997/61de6ba7-9ce3-e9bf-6e8c-5006154f6091.png)