Vue.jsでSPAサイトを作成するチュートリアル【3. コンポーネント編】

Vue.jsを使い始めていろいろできることが多くなってきたので、整理する意味も兼ねてチュートリアルにまとめます。
今回はコーポレートサイトを想定して作成していきます。
※記事が長くなったのでチュートリアルを分割しました。


## 目次

* [表示編](https://qiita.com/buchiya4th/items/cff0b2ab9ebd550c4e0f)
* [ルーター編](https://qiita.com/buchiya4th/items/f154191c8157bbd2239a)
* コンポーネント編 ←イマココ
* [CSS編](https://qiita.com/buchiya4th/items/6f5db9f58ee66982438e)
* [JS編](https://qiita.com/buchiya4th/items/3f3b9c6e48866e6d9d27)
* [ライブラリ編](https://qiita.com/buchiya4th/items/b4814c0018f9311af461)
* [メタ編](https://qiita.com/buchiya4th/items/dd8f16dfcd296bd247bb)
* [ビルド編](https://qiita.com/buchiya4th/items/71649f8fbd2f72b9e6e7)


## 前提

* タスクは`npm scripts`で一限管理
* コマンドは`yarn`を使用
* `vue-cli`の`webpack-simple`を使用


## バージョン

* "vue": "^2.5.11"
* "webpack": "^3.6.0"


## ヘッダーの作成

Default.vueの`p header`と`router-link`部分をヘッダーとしてコンポーネント化しましょう。
以下のディレクトリ構成で作成していきます。

```txt
/src
  /components
    /TheHeader
      TheHeader.vue
      TheHeader.pug
      TheHeader.scss
      TheHeader.js
  /css
  /img
  /layouts
  /pages
  省略
```

```html:/src/components/TheHeader.vue
<template
  lang="pug"
  src="./TheHeader.pug"
/>

<script src="./TheHeader.js" />

<style
  lang="scss"
  src="./TheHeader.scss"
  scoped
/>

```

`router-link`はrouter.jsで指定したnameを使うこともできます。

```pug:/src/components/TheHeader.pug
header#theHeader.theHeader
  p {{ text }}
  nav.theHeaderNav
    ul.theHeaderNavList
      li: router-link(:to="{ name: 'index' }") index
      li: router-link(:to="{ name: 'about' }") about
      li: router-link(:to="{ name: 'service' }") service
      li: router-link(:to="{ name: 'recruite' }") recruite
      li: router-link(:to="{ name: 'contact' }") contact

```

```scss:/src/components/TheHeader.scss
.theHeader {
}

```

```js:/src/components/TheHeader.js
export default {
  data: function() {
    return {
      text: 'theHeader'
    }
  }
}

```

次にTheHeaderコンポーネントを/src/layouts/Default.vueで読み込ませます。

```html:/src/layout/Default.vue
<template lang="pug">
.wrap
  the-header
  main#main.main: router-view
  p footer
</template>

<script>
import TheHeader from '../components/TheHeader/TheHeader.vue'

export default {
  components: {
    TheHeader
  }
}
</script>

```

表示確認をしてheaderテキストだったものがtheHeaderテキストに変更されていて、各リンクがリスト表示になっていれば成功です。


## フッターの作成

ヘッダーと同じ要領でフッターも作成していきましょう。

```txt
/src
  /components
    /TheHeader
    /TheFooter
      TheFooter.vue
      TheFooter.pug
      TheFooter.scss
      TheFooter.js
  /css
  /img
  /layouts
  /pages
  省略
```

```html:/src/components/TheFooter/TheFooter.vue
<template
  lang="pug"
  src="./TheFooter.pug"
/>

<script src="./TheFooter.js" />

<style
  lang="scss"
  src="./TheFooter.scss"
  scoped
/>

```

```pug:/src/components/TheFooter/TheFooter.pug
footer#theFooter.theFooter
  p.copyright &copy; {{ copyright }}

```

```scss:/src/components/TheFooter/TheFooter.scss
.theFooter {
}

```

```js:/src/components/TheFooter/TheFooter.js
export default {
  data: function() {
    return {
      copyright: '2018 vue skelton'
    }
  }
}

```

Default.vueにTheFooterを読み込ませましょう。

```html:/src/layouts/Defaul.vue
<template lang="pug">
.wrap
  the-header
  main#main.main: router-view
  the-footer
</template>

<script>
import TheHeader from '../components/TheHeader/TheHeader.vue'
import TheFooter from '../components/TheFooter/TheFooter.vue'

export default {
  components: {
    TheHeader,
    TheFooter
  }
}
</script>

```

ブラウザで確認してコピーライトが表示されていれば成功です。


## まとめ

コンポーネント化は、コンポーネントを作成し読み込ませたいところにscript内で読み込ませてtemplateに記述すると使用できます。
コンポーネントにするかどうかは都度検討する必要があります。
コンポーネント化しすぎるとファイルの行き来やデータの受け渡し等で混乱する可能性もあります。
ご利用は計画的に。