Vue CLI のサンプル

Vue CLI のサンプルです。
次のようなページを表示するサーバーのサンプルです。
![grimm01.png](https://qiita-image-store.s3.amazonaws.com/0/179446/ad3db31e-2c4d-bee3-6d51-c4c92c0f8c9b.png)
![grimm02.png](https://qiita-image-store.s3.amazonaws.com/0/179446/47d838e3-2200-7a66-5008-fd10bf479f82.png)

次のページを参考にしました。
[【超簡単】Vue.jsを使って3時間で自分のホームページを作成&公開する](https://qiita.com/abouch/items/35d7a202f3e74c7d4c3e)

1) プロジェクトの作成

```bash
vue create grimm
cd grimm
yarn add vue-router
```

>この段階でサーバーを動かしてみます。

```bash
yarn serve
```

>http://localhost:8080 にアクセスできることを確認。

2) src/main.js の編集

```js:src/main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')
```

3) src/router/index.js の作成

```js:src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Akazukin from '@/components/Akazukin'
import Ibarahime from '@/components/Ibarahime'
import Rapunzel from '@/components/Rapunzel'
import Shichiwa from '@/components/Shichiwa'


Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
   {
      path: '/akazukin',
      name: 'Akazukin',
      component: Akazukin 
    },
   {
      path: '/ibarahime',
      name: 'Ibarahime',
      component: Ibarahime 
    },
   {
      path: '/rapunzel',
      name: 'Rapunzel',
      component: Rapunzel
    },
   {
      path: '/shichiwa',
      name: 'Shichiwa',
      component: Shichiwa 
    }
  ]

})
```

4) src/App.vue の修正

```vue:src/App.vue
<template>
  <div id="app">
    <tab-menu></tab-menu>
    <router-view/>
  </div>
</template>

<script>

import TabMenu from '@/components/TabMenu'

export default {
  name: 'App',
  components: {
    TabMenu
  }
}
</script>


<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
```


5) src/components/ に次の６つのファイルを作成

TabMenu.vue
HelloWorld.vue
Akazukin.vue
Ibarahime.vue
Rapunzel.vue
Shichiwa.vue

```vue:src/components/TabMenu.vue
<template>
  <div>
    <ol>
      <li v-for="(item, index) in items" :key=index>
         <router-link v-bind:to=item.path>
            {{ item.title }}
         </router-link>
      </li>
    </ol>
  </div>
</template>

<script>
export default {
  name: 'TabMenu',
  data () {
    return {
      items: [
        { title: '赤ずきん', path: '/akazukin' },
        { title: 'いばらひめ', path: '/ibarahime' },
        { title: 'ラプンツェル', path: '/rapunzel' },
        { title: '七わのからす', path: '/shichiwa' }
      ]
    }
  }
}
</script>

<style scoped>

ol {
  margin-left: auto;
  width: 480px;
  display:flex;
  justify-content: center;
  padding: 0;
  list-style: none;
}


li {
  width: 100px;
  height: 50px;
  margin-left:10px;
  margin-right:10px;
  font-size: 14px;
  background-color: skyblue;
  border-radius: 8px;
  position: relative;
}

li:hover {
  opacity: 0.4;
}

/*  router-linkがaタグとして表示されてたのでスタイルをaタグに書いた*/
a {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  color: white;
  text-decoration: none;
  line-height: 50px;
}

</style>
```

```vue:src/components/HelloWorld.vue
<template>
<div>
  <p class="message">メッセージ: {{ msg }}
</p>
<blockquote>
Apr/6/2019<p />
</blockquote>
</div>
</template>

<style>
.message { color: blue; }
</style>

<script>
export default {
  props: {
    msg: {
      type: String,
      default: 'グリム童話の世界へようこそ'
    }
  }
}
</script>
```

次の４つは、script だけが異なります。

```vue:src/components/Akazukin.vue
<template>
  <div class="output">
    <div class="content">
    <h3> {{ name }}&nbsp;&nbsp;&nbsp;&nbsp;KHM {{khm}}</h3>
    <p> {{ text }} </p>
  </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      khm: '26',
      name: '赤ずきん',
      text: '　むかし、あるところに、ちいさな、かわいい女の子がいました。だれでも、ひと目見ただけで、この子がすきになりましたが、なんといっても一ばんかわいがったのは、この子のおばあさんでした。'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

div.output {
  text-align: center;
}

div.content {
  background-color: #eee;
  display: inline-block;
  margin: 10px;
  width: 50%;
}

h3 {
  color: blue;
}

p {
  width: 90%;
  display: inline-block;
  text-align: left;
}

</style>
```

```vue:src/components/Ibarahime.vue
（省略）
<script>
export default {
  data () {
    return {
      khm: '50',
      name: 'いばらひめ',
      text: '　昔むかし、王さまとおきさきががおりました。ふたりは毎日、「子どもがほしい！子どもがいればな！」と、言い暮らしていましたが、いつまでたっても、ひとりもさずかりませんでした。'
    }
  }
}
</script>
（省略）
```

```vue:src/components/Rapunzel.vue
（省略）
<script>
export default {
  data () {
    return {
      khm: '12',
      name: 'ラプンツェル',
      text: '　むかし、あるところに、亭主とおかみさんがおりました。長いあいだ、子どもがほしいと願っていましたが、さずかりませんでした。'
    }
  }
}
</script>
（省略）
```

```vue:src/components/Shichiwa.vue
（省略）
<script>
export default {
  data () {
    return {
      khm: '25',
      name: '七わのからす',
      text: '　むかし、ある男のひとに、むすこばかり、七人ありました。むすめをほしい、ほしいとねがってきたのですが、ひとりも、さずからなかったのです。'
    }
  }
}
</script>
（省略）
```

6) サーバーを起動

```bash
yarn serve
```